.moos-drawer,.moos-drawer-scrim{
  --panel-bg:var(--moos-red,#d6191f);
  --panel-fg:#fff;
  /* jasny róż zamiast bieli; akcenty na red-700, bo --moos-red na #fde7ea to 4.4:1 */
  --panel-surface:var(--moos-lightpink,#fde7ea);
  --panel-surface-hover:var(--moos-pink,#ffb3be);
  --panel-accent:var(--moos-red-700,#9b0409);
  --panel-inset:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:380ms;
}

/* wyłączenie natywnych rozwijanek Blocksy na pozycji-wyzwalaczu */
.moos-drawer-trigger .sub-menu,
.moos-drawer-trigger .ct-toggle-dropdown-desktop{display:none !important}

.moos-drawer-scrim{
  position:fixed;inset:0;z-index:99990;
  background:rgba(255,179,190,.62);
  backdrop-filter:blur(5px) saturate(1.15);-webkit-backdrop-filter:blur(5px) saturate(1.15);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.moos-drawer-scrim[hidden]{display:block}
body.moos-drawer-open .moos-drawer-scrim{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease),visibility 0s}
body.moos-drawer-hover .moos-drawer-scrim{background:rgba(255,179,190,.30);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none}

.moos-drawer{
  position:fixed;z-index:99991;
  top:calc(var(--moos-drawer-top,0px) + var(--panel-inset));
  bottom:var(--panel-inset);left:var(--panel-inset);
  width:min(500px,calc(100vw - var(--panel-inset)*2));
  display:flex;flex-direction:column;
  background:var(--panel-bg);color:var(--panel-fg);
  border-radius:3em;corner-shape:squircle;
  box-shadow:0 30px 70px -20px rgba(155,4,9,.55),0 2px 10px rgba(27,26,26,.12);
  overflow:hidden;
  transform:translate3d(calc(-100% - var(--panel-inset) - 20px),0,0);
  visibility:hidden;
  transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur);
  font-family:inherit;
}
body.moos-drawer-open .moos-drawer{transform:translate3d(0,0,0);visibility:visible;transition:transform var(--dur) var(--ease),visibility 0s}
/* UWAGA: bez color:inherit. Ten selektor ma specyficzność 0-1-1 i wygrywał
   z .moos-card / .moos-promo / .moos-pill (0-1-0), przez co każdy element na
   jasnym tle dostawał biały tekst dziedziczony z panelu. */
.moos-drawer a{text-decoration:none;box-shadow:none}

/* navbar nad panelem na desktopie — tylko gdy panel jest otwarty, żeby nie
   przebijać baneru cookies ani mini-koszyka w pozostałych sytuacjach */
@media (min-width:1000px){
  body.moos-drawer-open #header{position:relative;z-index:99992}
}

.moos-drawer-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 14px 32px}
.moos-drawer-title{font-weight:800;font-size:1.7rem;line-height:1.1;margin:0;color:var(--panel-fg);min-width:0}
.moos-title-link{display:inline-flex;align-items:center;gap:.4em;color:var(--panel-fg)}
.moos-title-link .moos-arrow{width:.62em;height:.62em;flex:0 0 auto;transition:transform 200ms var(--ease)}
.moos-title-link:hover .moos-arrow{transform:translateX(4px)}
.moos-title-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.moos-drawer-close{
  flex:0 0 auto;width:46px;height:46px;padding:0;border:0;cursor:pointer;
  border-radius:999px;corner-shape:squircle;
  display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;
  transition:background 180ms var(--ease),transform 180ms var(--ease);
}
.moos-drawer-close:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}
.moos-drawer-close svg{width:19px;height:19px}

.moos-drawer-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 32px 0;
  /* BEZ mask-image. Maska na kontenerze przewijania przycina w Chromium także
     pasek przewijania, przez co cała afordancja znikała. Wygaszenie u dołu
     robi i tak gradient .moos-drawer-foot (albo ::after, gdy stopki nie ma). */
  /* widoczny TOR, nie tylko kciuk — nakładkowe paski (macOS, Chrome) znikają
     do czasu przewinięcia, więc bez toru nie widać, że jest co przewijać */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.65) rgba(155,4,9,.45);scrollbar-gutter:stable;
}
.moos-drawer-scroll::-webkit-scrollbar{width:10px}
.moos-drawer-scroll::-webkit-scrollbar-track{background:rgba(155,4,9,.45);border-radius:999px;margin:4px 0}
.moos-drawer-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.65);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.moos-drawer-scroll::-webkit-scrollbar-thumb:hover{background:#fff;background-clip:padding-box;border:2px solid transparent}
.moos-drawer-scroll>:last-child{margin-bottom:104px}
/* dwie pigułki w stopce (Misja + Kontakt) — stopka jest o ~58px wyższa */
.moos-drawer.has-promo[data-scope="full"] .moos-drawer-scroll>:last-child{margin-bottom:166px}
.moos-drawer:not(.has-foot) .moos-drawer-scroll>:last-child{margin-bottom:24px}
/* wygaszenie u dołu, gdy nie ma stopki z pigułką Kontakt */
.moos-drawer:not(.has-foot)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  pointer-events:none;z-index:1;
  background:linear-gradient(to top,var(--panel-bg) 38%,rgba(214,25,31,0));
}

/* podpowiedź „jest więcej niżej” — widoczna tylko gdy da się przewinąć
   i jesteśmy na samej górze; znika po pierwszym przewinięciu */
.moos-scroll-hint{
  /* poza osią treści i w ciemnej czerwieni — jasnoróżowy krążek znikał
     na jasnoróżowych kartach, na których siadał */
  position:absolute;right:26px;bottom:92px;z-index:2;
  width:40px;height:40px;padding:0;cursor:pointer;
  display:grid;place-items:center;
  border-radius:999px;corner-shape:squircle;
  background:var(--moos-red-700,#9b0409);color:#fff;
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 8px 22px -6px rgba(27,26,26,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(6px);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 0s linear 260ms;
}
.moos-drawer:not(.has-foot) .moos-scroll-hint{bottom:22px}
.moos-drawer.has-promo[data-scope="full"] .moos-scroll-hint{bottom:150px}
.moos-drawer.is-scrollable.at-top .moos-scroll-hint{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 0s;
  animation:moos-hint-bob 1.6s ease-in-out .4s infinite;
}
.moos-scroll-hint:hover{background:var(--moos-red,#d6191f)}
.moos-scroll-hint svg{width:19px;height:19px}
@keyframes moos-hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (max-width:999px){.moos-scroll-hint{right:14px}}

/* „Wszystkie produkty” nad sekcjami. Nadrzędne wobec kategorii pod spodem,
   więc ten sam alfabet co .moos-sec-title — tylko cięższy, pełnej szerokości
   i odkreślony, żeby nie czytało się jako kolejna kategoria. */
.moos-allproducts{
  display:flex;align-items:center;gap:.7em;
  margin:0 0 24px;padding:0 0 15px;
  border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff;font-weight:800;font-size:.9rem;line-height:1.2;
  text-transform:uppercase;letter-spacing:.15em;
}
.moos-allproducts .moos-arrow{
  width:1.15em;height:1.15em;flex:0 0 auto;margin-left:auto;opacity:.75;
  transition:transform 200ms var(--ease),opacity 200ms var(--ease);
}
.moos-allproducts:hover .moos-arrow{transform:translateX(4px);opacity:1}
.moos-allproducts:hover .moos-allproducts-label{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* na desktopie nagłówek panelu JEST już linkiem „Wszystkie produkty” — drugi
   pod nim był powtórzeniem. Zostaje tylko w trybie pełnego menu, gdzie
   nagłówek brzmi po prostu „Menu”. */
.moos-drawer[data-scope="products"] .moos-allproducts{display:none}

.moos-sec{margin:0 0 28px}
.moos-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.moos-sec-title{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.15em;margin:0;color:#fff}
.moos-sec-link{display:inline-flex;align-items:center;gap:.7em;color:#fff}
.moos-sec-link .moos-arrow{width:1.15em;height:1.15em;flex:0 0 auto;opacity:.75;transition:transform 200ms var(--ease),opacity 200ms var(--ease)}
.moos-sec-link:hover .moos-arrow{transform:translateX(4px);opacity:1}
.moos-sec-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.moos-drawer[data-scope="full"] .moos-only-products{display:none}

/* grid-auto-rows:1fr — każdy kafelek dokładnie tej samej wysokości, niezależnie
   od długości nazwy i podtytułu. Klamry wierszy niżej pilnują, żeby dłuższy
   tekst nie rozpychał całego rzędu. Produkty bez zdjęcia w ogóle tu nie
   trafiają: warstwa danych degraduje je do .moos-rowitem, a te renderują się
   pod siatką. */
.moos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-bottom:12px}
.moos-card{display:flex;flex-direction:column;padding:10px 10px 14px;background:var(--panel-surface);color:var(--moos-ink,#1b1a1a);border-radius:2em;corner-shape:squircle;transition:transform 220ms var(--ease),background 220ms var(--ease)}
.moos-card:hover{transform:translateY(-3px);background:var(--panel-surface-hover)}
.moos-card-media{aspect-ratio:1/1;width:100%;margin-bottom:10px;border-radius:1.4em;corner-shape:squircle;overflow:hidden;display:block;background:var(--moos-pink,#ffb3be)}
.moos-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 320ms var(--ease)}
.moos-card:hover .moos-card-media img{transform:scale(1.045)}
.moos-card-media.is-fallback{display:grid;place-items:center}
.moos-card-media .moos-glyph{font-weight:800;font-size:1.9rem;color:#fff}
.moos-card-name{font-weight:700;font-size:.95rem;line-height:1.2;margin:0 0 3px;padding:0 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.moos-card-sub{font-size:.76rem;line-height:1.35;color:var(--moos-ink-soft,#2b292a);opacity:.8;margin:0 0 8px;padding:0 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.moos-card-price{margin-top:auto;font-weight:700;font-size:.85rem;color:var(--panel-accent);padding:0 4px}

/* „Zobacz wszystkie” — szóste pole siatki, przy pięciu kafelkach domyka dwa
   równe rzędy. Nie jest produktem, więc nie dostaje różowego wypełnienia:
   obrys na przezroczystym tle czyta się jako akcja, nie kolejny towar. */
.moos-card-all{
  align-items:center;justify-content:center;text-align:center;gap:12px;
  background:rgba(155,4,9,.30);
  border:1px solid rgba(255,255,255,.38);
  color:#fff;
}
.moos-card-all:hover{background:rgba(155,4,9,.52)}
.moos-card-all-arrow{
  width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:999px;corner-shape:squircle;
  background:rgba(255,255,255,.16);
  transition:background 200ms var(--ease),transform 200ms var(--ease);
}
.moos-card-all:hover .moos-card-all-arrow{background:rgba(255,255,255,.3);transform:translateX(3px)}
.moos-card-all-arrow svg{width:26px;height:26px}
.moos-card-all-label{font-weight:800;font-size:.74rem;line-height:1.25;text-transform:uppercase;letter-spacing:.08em}

.moos-rowlist{display:flex;flex-direction:column;gap:8px}
.moos-rowitem{display:flex;align-items:center;gap:13px;padding:9px 12px 9px 9px;background:rgba(155,4,9,.35);border-radius:1.3em;corner-shape:squircle;color:#fff;transition:background 200ms var(--ease),transform 200ms var(--ease)}
.moos-rowitem:hover{background:rgba(155,4,9,.55);transform:translateX(3px)}
.moos-rowitem-thumb{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;overflow:hidden;border-radius:1em;corner-shape:squircle;background:rgba(255,255,255,.2);font-weight:800;font-size:.9rem;color:#fff}
.moos-rowitem-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.moos-rowitem-text{min-width:0}
.moos-rowitem-name{display:block;font-weight:700;font-size:.95rem;line-height:1.25}
.moos-rowitem-sub{display:block;font-size:.74rem;line-height:1.3;opacity:.86}
.moos-rowitem-price{margin-left:auto;flex:0 0 auto;font-weight:700;font-size:.82rem;color:var(--moos-pink-tint,#ffe3e6)}

.moos-chips{display:flex;flex-wrap:wrap;gap:8px}
.moos-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;font-size:.82rem;font-weight:600;color:#fff;background:rgba(155,4,9,.35);border:1px solid rgba(255,255,255,.38);border-radius:999px;corner-shape:squircle;transition:background 180ms var(--ease)}
.moos-chip:hover{background:rgba(155,4,9,.55)}

.moos-rows{display:flex;flex-direction:column}
.moos-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.22);font-weight:700;font-size:1.15rem;color:#fff;transition:padding-left 200ms var(--ease)}
.moos-row:last-child{border-bottom:0}
.moos-row:hover{padding-left:10px}
.moos-dot{width:7px;height:7px;border-radius:50%;background:var(--moos-pink,#ffb3be);flex:0 0 auto}
.moos-chev{margin-left:auto;flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.55}

.moos-drawer-foot{position:absolute;left:0;right:0;bottom:0;padding:34px 32px 22px;pointer-events:none;background:linear-gradient(to top,var(--panel-bg) 42%,rgba(214,25,31,0))}
/* wyższa stopka = wcześniejszy stop, żeby górna pigułka nie siedziała na przezroczystym */
.moos-drawer.has-promo[data-scope="full"] .moos-drawer-foot{background:linear-gradient(to top,var(--panel-bg) 62%,rgba(214,25,31,0))}
.moos-pill{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--panel-surface);color:var(--panel-accent);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;padding:16px 22px;border-radius:999px;corner-shape:squircle;box-shadow:0 12px 26px -10px rgba(155,4,9,.7);transition:background 200ms var(--ease),transform 200ms var(--ease)}
.moos-pill:hover{background:var(--panel-surface-hover);transform:translateY(-2px)}
.moos-pill svg{width:17px;height:17px}

/* Misja Glow Up — druga pigułka w stopce, nad Kontaktem. Ten sam kolor i ta
   sama geometria co .moos-pill; różni je tylko ✦ zamiast koperty.
   Widoczna wyłącznie w trybie pełnego menu (.moos-only-full). */
.moos-promo{
  pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin:0 0 10px;
  background:var(--panel-surface);color:var(--panel-accent);
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;
  padding:16px 22px;border-radius:999px;corner-shape:squircle;
  box-shadow:0 12px 26px -10px rgba(155,4,9,.7);
  transition:background 200ms var(--ease),transform 200ms var(--ease);
}
.moos-promo:hover{background:var(--panel-surface-hover);transform:translateY(-2px)}
.moos-promo-glyph{font-size:1.05rem;line-height:1}

.moos-drawer[data-scope="products"] .moos-only-full{display:none}

@media (max-width:999px){
  .moos-drawer{
    width:calc(100vw - var(--panel-inset)*2);max-width:430px;
    top:max(var(--panel-inset),env(safe-area-inset-top));
    bottom:max(var(--panel-inset),env(safe-area-inset-bottom));
  }
  /* poziome 24px zjadało ~12% szerokości ekranu 390px — po zejściu do 18px
     kafelek w siatce rośnie ze 151px do 158px */
  .moos-drawer-head{padding:18px 14px 10px 18px}
  .moos-drawer-scroll{padding:6px 18px 0}
  .moos-drawer-foot{padding:30px 18px 16px}
  /* trzy kolumny na ekranie 390px to kafelek ~103px — podtytuł już się tam
     sensownie nie mieści, więc zostaje nazwa i cena */
  .moos-grid{gap:8px}
  .moos-card{padding:6px 6px 10px}
  .moos-card-media{margin-bottom:8px;border-radius:1.1em}
  .moos-card-name{font-size:.78rem;line-height:1.15;padding:0 2px}
  .moos-card-sub{display:none}
  .moos-card-price{font-size:.76rem;padding:0 2px}
  .moos-card-all{gap:8px}
  .moos-card-all-arrow{width:40px;height:40px}
  .moos-card-all-arrow svg{width:20px;height:20px}
  .moos-card-all-label{font-size:.66rem;letter-spacing:.05em}
  .moos-allproducts{margin-bottom:20px;padding-bottom:13px}
}

@media (prefers-reduced-motion:reduce){
  .moos-drawer,.moos-drawer-scrim,.moos-card,.moos-pill,.moos-promo,.moos-rowitem,.moos-drawer-close{transition-duration:1ms !important}
  .moos-card:hover,.moos-pill:hover,.moos-promo:hover,.moos-rowitem:hover,.moos-drawer-close:hover{transform:none}
  .moos-card-media img,.moos-card:hover .moos-card-media img{transition-duration:1ms !important;transform:none}
  .moos-card-all-arrow,.moos-card-all:hover .moos-card-all-arrow{transition-duration:1ms !important;transform:none}
  .moos-drawer.is-scrollable.at-top .moos-scroll-hint{animation:none}
}