/* ═══════════════════════════════════════════════════════════════════════════
   Juffinger's Gaumenwerk — Produkte & Bestellung
   Той самий словник, що на головній (style.css): токени, --f-display/-script,
   капс-лейбли, волосіні, ромби, купол border-radius:50vw, .mcardf-форма.
   Різниця в моториці: тут НЕМА gsap/lenis/split-type — уся анімація це
   CSS-переходи + один IntersectionObserver, який дописує .is-in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* overflow-x:hidden (style.css) робить із html/body/main scroll-контейнер, і
   position:sticky прив'язується до НЬОГО, а не до вьюпорта — тому прилиплий
   фільтр просто не працював. overflow-x:clip обрізає так само, але контейнером
   прокрутки не стає (специфікація дозволяє пару clip/visible саме для цього).
   Рушії без підтримки clip проігнорують рядок і лишаться на hidden: фільтр там
   буде звичайним нерухомим рядком — не зламано, лише без прилипання. */
html,body,main{overflow-x:clip}

/* ── nav — тут це справжня смуга, а не прозорий оверлей ─────────────────────
      На головній .nav — це fixed-оверлей на весь екран із двома кутовими
      блоками поверх hero: там під ним завжди велике фото, і знак читається.
      Каталог — це 47 карток на кремовому тлі, і той самий прозорий знак висів
      би просто на фотографіях товарів. Тому тут nav перезбирається у вузьку
      верхню смугу, яка НА ФОТО-ШАПЦІ лишається прозорою (як на головній), а
      щойно сторінка поїхала — набирає фірмове тло (.is-stuck із produkte.js).
      Індикатор скролу (лічильник + рейка) прибраний: він міряв прохід повз
      hero, якого тут немає. ────────────────────────────────────────────────── */
.nav{
  inset:0 0 auto 0;height:auto;
  padding:clamp(.6rem,1.5vw,1.1rem) var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  pointer-events:auto;
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
}
.nav.is-stuck{
  /* .95 було замало: під смугою їдуть картки, і їхні назви просвічували
     навіть через blur — на однорідному фіолетовому це читалось як брудна пляма */
  background:rgba(96,70,105,.985);
  backdrop-filter:blur(10px);
  box-shadow:0 .5rem 1.5rem rgba(20,12,24,.22);
  padding-block:clamp(.45rem,1vw,.75rem);
}
.nav_scroll{display:none}
.nav_left,.nav_right_actions{position:static;opacity:1}
.nav_logo{width:clamp(2.5rem,3.6vw,3.4rem);transition:width .45s var(--ease)}

/* ── phead — шапка сторінки ─────────────────────────────────────────────────
      Роль hero, але без пінінгу й трифазного скролу: одне фото на весь екран,
      scrim, і центрований стос типографіки. Композиція та сама, що в .hero_stack
      (eyebrow → script → display → tagline → CTA), тому сторінка читається як
      продовження головної, а не як інший сайт. ─────────────────────────────── */
.phead{
  position:relative;isolation:isolate;overflow:clip;
  min-height:min(100svh,54rem);
  background:var(--ink);color:var(--bone);
  /* нижнє поле мусить бути БІЛЬШЕ за --dome-rise: рівно на цю висоту наступна
     секція заїжджає поверх шапки своїм куполом, і без запасу він накрив би
     кнопки. Одне джерело числа на два місця — як у пари .menus / #info. */
  padding:clamp(6rem,13vh,9rem) var(--gut) calc(var(--dome-rise) + clamp(2rem,5vh,4.5rem));
  display:grid;justify-items:center;align-content:center;text-align:center;
}
.phead_media{position:absolute;inset:0;z-index:-1}
.phead_media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  /* повільний, майже непомітний наїзд замість скрол-паралаксу: рух є, але він
     не залежить від скролу і не вимагає жодної бібліотеки */
  animation:pheadDrift 26s var(--ease-out) infinite alternate;
}
@keyframes pheadDrift{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.phead_scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(31,20,35,.82) 0%,rgba(31,20,35,.5) 34%,
                    rgba(31,20,35,.5) 62%,rgba(31,20,35,.86) 100%),
    radial-gradient(110% 70% at 50% 46%,rgba(31,20,35,0) 0%,rgba(31,20,35,.42) 100%);
}
.phead_stack{width:100%;max-width:58rem;display:grid;justify-items:center}

.phead_k{display:flex;gap:.6em;align-items:center;justify-content:center;color:var(--bone-60)}
.phead_k i{font-style:normal;color:var(--bone-38)}
.phead_script{
  font-family:var(--f-script);font-weight:400;
  font-size:var(--fs-script);line-height:.82;color:var(--mauve);
  margin:clamp(1.1rem,3.2vh,2.4rem) 0 0 .06em;
}
.phead_h{
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:650;
  text-transform:uppercase;
  /* вужче за --fs-display головної: «Bestellung» — довге слово, і на 5.8vw воно
     ламало б рядок на всіх ноутбуках */
  font-size:clamp(1.5rem,4.6vw,4.1rem);line-height:.9;letter-spacing:-.024em;
  margin-top:-.06em;
}
.phead_lead{
  margin-top:clamp(1.35rem,3.4vh,2.5rem);max-width:44rem;
  font-size:.9375rem;line-height:1.6;color:var(--bone-60);
}
.phead_lead strong{color:var(--bone);font-weight:600}

/* три факти замовлення — той самий рядок капс-слів із ромбами, що .after_deco,
   лише світлий (секція темна) */
.phead_facts{
  list-style:none;margin:clamp(1.75rem,4vh,3rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.7rem,2vw,1.5rem);color:var(--bone-60);
}
.phead_facts .deco_mark{border-color:rgba(241,231,223,.4)}
.phead_cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:clamp(1.75rem,4.2vh,3rem)}

/* ── shop — світлий «каталог» під куполом ───────────────────────────────────
      Купол і кремове тло — рівно та сама техніка, що в #info на головній:
      два кутові радіуси по 50vw у сумі = 100vw, тому дуги сходяться в центрі
      верхньої межі. Негативний margin підіймає секцію поверх шапки на ту саму
      висоту, під яку в .phead зарезервований padding-bottom. ───────────────── */
.shop{
  position:relative;z-index:2;
  background:var(--bone);color:var(--ink);
  margin-top:calc(var(--dome-rise) * -1);
  border-radius:50vw 50vw 0 0;
  padding:clamp(3rem,9vh,7rem) var(--gut) clamp(4rem,10vh,7rem);
}
.shop_head{display:grid;justify-items:center;text-align:center}
.shop_k{color:rgba(31,20,35,.55)}
.shop_h{
  margin-top:clamp(.9rem,2vw,1.5rem);max-width:30ch;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.35rem,2.6vw,2.9rem);line-height:1.06;letter-spacing:-.012em;
  text-transform:uppercase;
}
.shop_note{
  margin-top:clamp(1.1rem,2.4vw,1.9rem);max-width:52ch;
  color:rgba(31,20,35,.72);font-size:.9375rem;line-height:1.6;
}
.shop_note a{border-bottom:1px solid rgba(31,20,35,.3)}
.shop_note a:hover{border-bottom-color:var(--ink)}

/* ── tabs — фільтр категорій ────────────────────────────────────────────────
      Прилипає під смугою nav (--navbar-h пише produkte.js, коли міряє її
      реальну висоту), лежить нижче за неї в шарах (z-index 20 < 40).
      Форма — пігулка по центру, а НЕ смуга на всю ширину: секція має купол
      border-radius:50vw і нічого не обрізає, тому повноширинна смуга вилазила б
      з-під дуги в темне тло обабіч. Розділювач — той самий ромб .deco_mark, що
      на головній (у старому макеті тут стояв «×»). ─────────────────────────── */
.tabs{
  position:sticky;top:calc(var(--navbar-h,3.5rem) + clamp(.4rem,1vw,.75rem));z-index:20;
  margin:clamp(2rem,5vw,3.5rem) auto clamp(2.25rem,5vw,3.75rem);
  width:fit-content;max-width:100%;
  padding:clamp(.5rem,1.1vw,.7rem) clamp(1rem,2.4vw,1.75rem);
  border:1px solid rgba(31,20,35,.16);border-radius:999px;
  background:rgba(241,231,223,.985);
  backdrop-filter:blur(10px);
  box-shadow:0 .5rem 1.5rem rgba(31,20,35,.08);
}
.tabs_in{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.5rem,1.6vw,1.35rem);
}
.tab{
  position:relative;padding:.35em .1em;cursor:pointer;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:rgba(31,20,35,.5);text-align:center;
  transition:color .35s var(--ease);
}
.tab:hover{color:rgba(31,20,35,.85)}
.tab.is-on{color:var(--brand)}
/* волосінь під активним пунктом — той самий знак вибору, що в .cat_tab */
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:.05em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .4s var(--ease);
}
.tab.is-on::after{transform:scaleX(1)}

/* ── pcat — категорія ───────────────────────────────────────────────────── */
.pcat+.pcat{margin-top:clamp(3.5rem,9vw,7rem)}
.pcat[hidden]{display:none}
.pcat_head{display:grid;justify-items:center;gap:clamp(.6rem,1.4vw,1rem);text-align:center}
.pcat_h{
  font-family:var(--f-script);font-weight:400;color:var(--brand);
  font-size:clamp(1.9rem,5vw,3.9rem);line-height:1;
  /* Pinyon має довгі виносні елементи — без внутрішнього запасу вони
     обрізались би сусідніми межами блоку */
  padding:.12em .1em .18em;
}
.pcat_rule{width:1px;height:clamp(1.5rem,2.8vw,2.25rem);background:rgba(31,20,35,.2)}

/* підгрупа («BIO-Würstel», «BIO-Bergrindfleisch») — капс-рядок із волосінями
   з обох боків: рівно той самий мотив, що .deco_line, лише горизонтальний */
.pgroup{
  display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2rem);
  margin:clamp(2.25rem,5vw,3.5rem) 0 clamp(1.35rem,3vw,2.25rem);
  color:rgba(31,20,35,.5);
}
.pgroup::before,.pgroup::after{content:"";flex:1 1 0;height:1px;background:rgba(31,20,35,.16)}

/* ── pgrid / pc — картка продукту ───────────────────────────────────────────
      Гострі кути, волосінна рамка, білий папір на кремовому тлі — той самий
      «аркуш», що .mcardf і .loc_card, лише менший.
      auto-fill + minmax: кількість карток у категорії різна (9 / 17 / 21), і
      сітка не має розтягувати три картки на всю ширину. ────────────────────── */
/* auto-fit із верхньою межею колонки (а не 1fr) + justify-content:center:
   у підгрупі може бути і сім товарів, і два, і без центрування останній
   неповний ряд лишався б притиснутим до лівого краю з великою дірою праворуч.
   Верхня межа 17rem заодно не дає двом карткам розтягнутись на пів екрана. */
.pgrid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),17rem));
  justify-content:center;
  gap:clamp(1rem,2.2vw,1.85rem);
}
.pc{display:flex}
.pc_in{
  position:relative;width:100%;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(31,20,35,.13);
  transition:border-color .4s var(--ease),box-shadow .5s var(--ease-out),transform .5s var(--ease-out);
}
.pc_in:hover{box-shadow:0 .9rem 2.2rem rgba(31,20,35,.1);transform:translateY(-3px)}
/* вибраний товар: фірмова рамка + тінь того ж кольору — картка «підсвічена»,
   а не залита, тому фото лишається головним */
.pc.is-on .pc_in{
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand),0 .9rem 2.2rem rgba(96,70,105,.18);
}

/* фото — кнопка: клік по ньому й додає товар (це головна дія картки) */
.pc_pick{
  display:block;position:relative;width:100%;aspect-ratio:1;
  overflow:clip;background:#efe7e1;cursor:pointer;border:0;padding:0;
}
.pc_pick img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.pc_in:hover .pc_pick img{transform:scale(1.045)}
/* кільце з підписом — той самий прилад, що .tile_ring на головній, лише
   нерухомо в центрі фото (без «доганяння» курсора: тут картка маленька) */
.pc_ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(4.5rem,7vw,5.75rem);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(241,231,223,.85);background:rgba(31,20,35,.42);
  backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:0 .5rem;text-align:center;
  color:var(--bone);
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;line-height:1.35;
  opacity:0;scale:.8;
  transition:opacity .3s var(--ease-out),scale .45s var(--ease-out);
  pointer-events:none;
}
.pc_pick:hover .pc_ring,.pc_pick:focus-visible .pc_ring{opacity:1;scale:1}
/* галочка вибраного — лишається видимою без hover, бо це стан, а не affordance */
.pc_mark{
  position:absolute;top:.6rem;right:.6rem;
  width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--brand);color:var(--bone);
  display:grid;place-items:center;font-size:.8rem;line-height:1;
  opacity:0;scale:.6;
  transition:opacity .3s var(--ease-out),scale .4s var(--ease-out);
  pointer-events:none;
}
.pc.is-on .pc_mark{opacity:1;scale:1}

.pc_body{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(.9rem,1.8vw,1.25rem) clamp(.9rem,1.8vw,1.15rem) clamp(.8rem,1.6vw,1.1rem);
  text-align:center;
}
/* min-height на два рядки: назви бувають в один рядок («BIO-Tafelspitz») і в
   два («BIO-Kaiserteil o. Deckel …»), і без запасу підпис із ціною стрибали б
   по висоті від картки до картки в тому самому ряду */
.pc_n{
  display:flex;align-items:center;justify-content:center;min-height:2.4em;
  font-family:var(--f-display);font-variation-settings:'opsz' 24;font-weight:600;
  font-size:.9375rem;line-height:1.2;letter-spacing:.005em;text-transform:uppercase;
}
.pc_s{margin-top:.45rem;color:rgba(31,20,35,.5)}
.pc_p{
  margin-top:.7rem;
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:600;
  font-size:1.0625rem;letter-spacing:.005em;color:var(--brand);white-space:nowrap;
}

/* ── дія: «Auswählen» ↔ степер ─────────────────────────────────────────────
      Обидва стани живуть у DOM завжди — просто один із них [hidden]. Само
      числове поле НІКОЛИ не прибирається з форми: воно й є той «власний
      number-field на кожен продукт», який читає smtp.js. Порожньою його
      лишати нельзя (порожні поля йдуть у лист), тому нейтральний стан — 0:
      smtp.js свідомо пропускає number-поля зі значенням 0. ────────────────── */
.pc_act{margin-top:auto;padding-top:clamp(.9rem,1.8vw,1.15rem)}
.pc_add{
  width:100%;padding:.75rem 1rem;cursor:pointer;
  border:1px solid rgba(31,20,35,.35);border-radius:999px;background:transparent;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:var(--ink);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.pc_add:hover,.pc_add:focus-visible{background:var(--brand);border-color:var(--brand);color:var(--bone)}
.pc_add[hidden]{display:none}

.pc_qty{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:.5rem;
}
.pc_qty[hidden]{display:none}
.pc_step{
  width:2.1rem;height:2.1rem;flex:none;cursor:pointer;
  border:1px solid rgba(31,20,35,.28);border-radius:50%;
  display:grid;place-items:center;font-size:1rem;line-height:1;color:var(--ink);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.pc_step:hover,.pc_step:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--bone)}
/* поле — підкреслений рядок, як .mfield у формах сайту */
.pc_field{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.35rem;
  padding-bottom:.3rem;border-bottom:1px solid rgba(31,20,35,.3);
  transition:border-color .35s var(--ease);
}
.pc_field:focus-within{border-bottom-color:var(--brand)}
.pc_field input{
  width:100%;padding:0;border:0;background:transparent;
  font:inherit;font-family:var(--f-display);font-weight:600;font-size:1rem;
  letter-spacing:normal;text-align:right;color:var(--ink);
  /* стрілки браузера дублюють власні −/+ і ламають ряд по висоті */
  appearance:textfield;-moz-appearance:textfield;
}
.pc_field input::-webkit-outer-spin-button,
.pc_field input::-webkit-inner-spin-button{appearance:none;margin:0}
.pc_field input:focus{outline:0}
.pc_unit{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(31,20,35,.55);
}
.pc_del{
  grid-column:1/-1;justify-self:center;margin-top:.5rem;cursor:pointer;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:rgba(31,20,35,.45);border-bottom:1px solid transparent;padding-bottom:.1em;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.pc_del:hover,.pc_del:focus-visible{color:var(--brand);border-bottom-color:var(--brand)}

/* порожній результат фільтра — щоб сітка не лишалась просто нічим */
.pempty{
  margin-top:clamp(2rem,5vw,3.5rem);text-align:center;
  color:rgba(31,20,35,.55);font-size:.9375rem;
}
.pempty[hidden]{display:none}

/* ── ordf — картка замовлення ───────────────────────────────────────────────
      Той самий крій, що .mcardf на головній (світле полотно --sky, ліва рейка,
      підкреслені рядки). Тут вона ширша й має власний заголовок і зведення
      вибраних товарів. ──────────────────────────────────────────────────────*/
.ordf{
  margin:clamp(4rem,10vw,7rem) auto 0;width:min(100%,62rem);
  scroll-margin-top:clamp(4rem,10vh,7rem);
}
.ordf .mcardf{padding:clamp(1.5rem,3.4vw,3rem)}
.ordf_h{
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.25rem,2.4vw,2.05rem);line-height:1.06;letter-spacing:-.012em;
  text-transform:uppercase;margin-bottom:clamp(.9rem,2vw,1.5rem);
}
.ordf_lead{
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  color:rgba(31,20,35,.7);font-size:.9375rem;line-height:1.6;
}

/* зведення вибраного — читається як чек: назва ліворуч, кількість праворуч */
.sum{
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid rgba(31,20,35,.22);border-bottom:1px solid rgba(31,20,35,.22);
  padding:clamp(.9rem,2vw,1.35rem) 0;
}
.sum_k{color:rgba(31,20,35,.5);margin-bottom:.75rem}
.sum_list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sum_i{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:baseline;
  font-size:.875rem;line-height:1.4;
}
.sum_i b{
  font-family:var(--f-display);font-weight:600;font-size:.9375rem;
  white-space:nowrap;color:var(--brand);
}
.sum_none{font-size:.875rem;color:rgba(31,20,35,.5)}

/* дата й час — два рядки в одному ряду, як .mfield--split на головній */
.ordf_row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
@media (max-width:36rem){.ordf_row{grid-template-columns:1fr}}

/* чекбокс — власний квадрат-ромб замість системного: системний на кремовому
   полотні виглядає як чужа деталь ОС */
.mcheck{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;
  margin-top:clamp(.5rem,1.4vw,1rem);cursor:pointer;
}
.mcheck input{
  appearance:none;-webkit-appearance:none;margin:.05rem 0 0;flex:none;
  width:1.1rem;height:1.1rem;border:1px solid rgba(31,20,35,.45);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.mcheck input::after{
  content:"";width:.5rem;height:.28rem;
  border-left:1.5px solid var(--bone);border-bottom:1.5px solid var(--bone);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.mcheck input:checked{background:var(--brand);border-color:var(--brand)}
.mcheck input:checked::after{opacity:1;transform:rotate(-45deg) scale(1)}
.mcheck input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mcheck_t{font-size:.875rem;line-height:1.5;color:rgba(31,20,35,.75)}
.mcheck_t span{display:block;margin-top:.2rem;font-size:.8125rem;color:rgba(31,20,35,.55)}

/* ── customForm — кнопка надсилання ────────────────────────────────────────
      Це <p>, а не <button> (так вимагає smtp.js), тому всю поведінку кнопки
      їй треба дописати руками: курсор, вирівнювання, hover. Геометрія й
      колір — рівно ті самі, що в .mcardf_send на головній, щоб дві форми
      сайту виглядали однією мовою. ────────────────────────────────────────── */
.customForm{
  display:inline-block;margin:0;padding:.95rem 2.25rem;
  border:1px solid rgba(31,20,35,.45);border-radius:999px;
  background:transparent;color:var(--ink);
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  text-align:center;cursor:pointer;user-select:none;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             color .4s var(--ease),transform .3s var(--ease);
}
.customForm:hover,.customForm:focus-visible{
  background:var(--ink);border-color:var(--ink);color:var(--bone);
}
.customForm:active{transform:translateY(1px)}

/* підсвітка незаповненого обовʼязкового поля — клас від smtp.js */
.el-invalid{border-color:#8c2f28 !important}
.mfield.el-invalid,.mfield:has(.el-invalid){border-bottom-color:#8c2f28}

/* ── bask — прилипла смуга «кошика» ────────────────────────────────────────
      З'являється лише коли щось вибрано; сама смуга не є формою — це ярлик до
      картки замовлення й лічильник вибраного. ─────────────────────────────── */
.bask{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  padding:clamp(.7rem,1.6vw,1rem) var(--gut);
  background:rgba(96,70,105,.96);color:var(--bone);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(241,231,223,.18);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem clamp(1rem,3vw,2rem);
  transform:translateY(110%);
  transition:transform .5s var(--ease-out);
}
.bask.is-on{transform:none}
.bask_n{display:flex;align-items:baseline;gap:.6rem}
.bask_c{
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:600;
  font-size:1.35rem;line-height:1;font-variant-numeric:tabular-nums;
}
.bask_l{color:rgba(241,231,223,.72)}
.bask_a{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}
.bask_clear{
  cursor:pointer;color:rgba(241,231,223,.62);
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  border-bottom:1px solid transparent;padding-bottom:.1em;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.bask_clear:hover,.bask_clear:focus-visible{color:var(--bone);border-bottom-color:var(--bone)}
.bask_go{
  padding:.7rem 1.6rem;border:1px solid var(--bone);border-radius:999px;
  background:var(--bone);color:var(--brand);cursor:pointer;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:700;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.bask_go:hover,.bask_go:focus-visible{background:transparent;color:var(--bone)}
/* смуга кошика перекриває низ сторінки — запас під підвалом */
body.has-bask .foot{padding-bottom:clamp(5.5rem,12vh,7.5rem)}

/* ── hours — Öffnungszeiten ───────────────────────────────────────────────── */
.hours{
  background:var(--bone);color:var(--ink);
  padding:clamp(3rem,9vh,6rem) var(--gut) clamp(4rem,11vh,8rem);
  display:grid;justify-items:center;text-align:center;
}
.hours_h{
  margin-top:clamp(.9rem,2vw,1.5rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.35rem,2.6vw,2.5rem);line-height:1.05;letter-spacing:-.012em;
  text-transform:uppercase;
}
.hours .loc_card{margin-top:clamp(1.75rem,4vw,3rem);width:min(100%,30rem)}
.hours_note{
  margin-top:clamp(1.5rem,3.5vw,2.5rem);max-width:46ch;
  color:rgba(31,20,35,.6);font-size:.875rem;line-height:1.6;
}
/* .btn--ghost із style.css розрахований на темні секції (світла рамка й текст),
   а ця секція кремова — тому тут свій, темний варіант того самого контуру */
.hours_cta{
  margin-top:clamp(1.75rem,4vw,2.75rem);
  border-color:rgba(31,20,35,.4);color:var(--ink);cursor:pointer;
}
.hours_cta:hover,.hours_cta:focus-visible{border-color:var(--ink);background:rgba(31,20,35,.06)}

/* кнопка в списку навігації-попапа: <button> не тягнеться на всю ширину сам */
.pop_nav_list .pop_nav_link{width:100%;text-align:left;cursor:pointer;font-family:var(--f-display)}

/* ── поява при скролі — єдина «сюжетна» анімація сторінки ──────────────────
      Один IntersectionObserver дописує .is-in (assets/js/produkte.js). Ніякого
      скрол-скрабу: елемент з'являється один раз і більше нічим не керується. */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rise.is-in{opacity:1;transform:none}
/* картки хвилею: затримка від індексу в сітці, який дописує JS */
.pc{transition-delay:calc(var(--i,0) * 45ms)}

@media (max-width:56rem){
  /* пігулка стає смугою на всю ширину контенту: чотири назви категорій у рядок
     тут не вміщаються, тому вони прокручуються по горизонталі */
  .tabs{width:auto;border-radius:1.25rem;padding-inline:clamp(.75rem,3vw,1.25rem)}
  .tabs_in{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .tabs_in::-webkit-scrollbar{display:none}
  .tab{flex:none}
  /* ромби-розділювачі на вузькому екрані лише крадуть місце в самих пунктів */
  .tabs_in .deco_mark{display:none}
}
@media (max-width:44rem){
  .phead{min-height:auto}
  .bask{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .shop{margin-top:0;border-radius:0}
  .phead_media img{animation:none}
  .pc_in:hover{transform:none}
  .pc_in:hover .pc_pick img{transform:none}
  .rise{opacity:1;transform:none;transition:none}
  .pc{transition-delay:0s}
  .bask{transition:none}
}