/* ============================================================
   Babeczki Kramara — implementacja projektu
   BabeczkiKramara-Layout-Desktop-01.psd (canvas 1600 × 5000)
   Wartości w px odpowiadają warstwom PSD przy szerokości 1600.
   ============================================================ */
@layer fonts, base, layout, components, pages, motion, responsive;

@layer fonts {
  /* Apfel Grotezk — Collletttivo, SIL OFL 1.1 (licencja w assets/fonts) */
  @font-face{font-family:"Apfel Grotezk";src:url("../fonts/apfel_grotezk_regular.woff2") format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:"Apfel Grotezk";src:url("../fonts/apfel_grotezk_mittel.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Apfel Grotezk";src:url("../fonts/apfel_grotezk_fett.woff2") format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:"Apfel Grotezk";src:url("../fonts/apfel_grotezk_satt.woff2") format("woff2");font-weight:900;font-display:swap}

  /* Bricolage Grotesque i Poppins — SIL OFL 1.1, podział na latin / latin-ext */
  @font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage_grotesque_latin_500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage_grotesque_latin_ext_500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage_grotesque_latin_700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage_grotesque_latin_ext_700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage_grotesque_latin_800.woff2") format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage_grotesque_latin_ext_800.woff2") format("woff2");font-weight:800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:"Poppins";src:url("../fonts/poppins_latin_400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:"Poppins";src:url("../fonts/poppins_latin_ext_400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
}

@layer base {
  :root{
    --ink:#373b47;
    --yellow:#f9c937;
    --hero-bg:#e9ded5;
    --soft:#f7f2ef;
    --dot:#dedad7;
    --white:#fff;

    --font-main:"Apfel Grotezk","Helvetica Neue",Arial,sans-serif;
    --font-ui:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
    --font-copy:"Poppins","Helvetica Neue",Arial,sans-serif;

    /* kontener treści: 150 px marginesu przy 1600 → 1300 px */
    --gutter:clamp(20px,5vw,50px);
    --container:1300px;
    --radius:25px;

    color-scheme:light;
  }

  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:var(--font-main);
    font-weight:500;
    font-size:1rem;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
  ul,ol{padding:0;list-style:none}
  img,svg,video{display:block;max-inline-size:100%;block-size:auto}
  a{color:inherit;text-decoration:none}

  :focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:2px}
  @media (forced-colors:active){ :focus-visible{outline-color:CanvasText} }

  .visually-hidden{
    position:absolute!important;inline-size:1px;block-size:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .skip-link{
    position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:100;
    background:var(--ink);color:var(--white);padding:14px 20px;
  }
  .skip-link:focus{inset-inline-start:0}
}

@layer layout {
  .container{
    box-sizing:border-box;
    inline-size:min(var(--container),100% - var(--gutter) * 2);
    margin-inline:auto;
  }
}

@layer components {

  /* ---------- przyciski: 172 × 58, ostre narożniki ---------- */
  .btn{
    box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;
    min-inline-size:172px;min-block-size:58px;padding-inline:28px;
    font-family:var(--font-ui);font-weight:700;font-size:16px;line-height:1;
    color:var(--ink);border:1px solid var(--ink);background:transparent;
    cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  }
  .btn-yellow{background:var(--yellow);border-color:var(--yellow)}
  .btn-yellow:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
  .btn-line:hover{background:var(--ink);color:var(--white)}

  /* ---------- nagłówek ---------- */
  .site-header{
    position:absolute;inset-block-start:0;inset-inline:0;z-index:20;
  }
  .site-header-inner{
    inline-size:min(1500px,100% - var(--gutter) * 2);
    margin-inline:auto;padding-block-start:51px;
    display:flex;align-items:flex-start;gap:24px;
  }
  .site-logo{flex:none;inline-size:321px}
  .site-logo img{inline-size:100%}
  .site-nav{margin-inline:auto;padding-block-start:28px}
  .site-nav ul{display:flex;gap:38px}
  .site-nav a{
    font-family:var(--font-ui);font-weight:500;font-size:14px;line-height:22px;
    text-transform:uppercase;letter-spacing:.02em;
  }
  .site-nav a:hover{color:#000;text-decoration:underline;text-underline-offset:5px}
  .social{display:flex;align-items:center;gap:12px;padding-block-start:23px}
  .social a{display:grid;place-items:center;inline-size:24px;block-size:24px}
  .social svg{inline-size:20px;block-size:20px}
  .social a:hover{opacity:.7}
  .nav-toggle{
    display:none;margin-inline-start:auto;
    inline-size:48px;block-size:48px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;
  }

  /* ---------- hero ---------- */
  .hero{
    box-sizing:border-box;
    position:relative;isolation:isolate;overflow:hidden;
    min-block-size:clamp(560px,50vw,900px);
    background:var(--hero-bg);
    display:flex;align-items:flex-start;
    padding-block:clamp(170px,18.7vw,299px) clamp(56px,8vw,128px);
  }
  .hero-media{position:absolute;inset:0;z-index:-1}
  .hero-media img,.hero-media video{
    inline-size:100%;block-size:100%;object-fit:cover;object-position:right center;
  }
  .hero-content{display:flex;flex-direction:column;align-items:flex-start}
  .hero h1{
    font-weight:900;font-size:clamp(2.6rem,5vw,5rem);line-height:.965;letter-spacing:-.005em;
    margin-inline-start:-.04em;
  }
  .hero h1 span{display:block}
  .hero-lead{
    font-family:var(--font-copy);font-weight:400;font-size:16px;line-height:22px;
    max-inline-size:17rem;margin-block-start:clamp(14px,1.1vw,17px);
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:clamp(28px,3.4vw,55px)}

  /* ---------- pasek przewijający ---------- */
  .ticker{background:var(--yellow);overflow:hidden;padding-block:24px}
  .ticker-track{display:flex;inline-size:max-content;animation:ticker 42s linear infinite}
  .ticker-track span{
    font-family:var(--font-ui);font-weight:700;font-size:24px;line-height:25px;
    text-transform:uppercase;white-space:nowrap;padding-inline-end:.3em;
  }
  .ticker-track b{font-weight:800}
  @keyframes ticker{to{transform:translateX(-50%)}}

  /* ---------- strefa 0 ---------- */
  .zero{padding-block:clamp(64px,6.125vw,98px) clamp(64px,6vw,96px);text-align:center}
  .zero h2{
    font-weight:900;font-size:clamp(3rem,6.25vw,6.25rem);line-height:.8;
    color:var(--yellow);letter-spacing:-.01em;
  }
  .zero-list{
    display:flex;justify-content:space-between;gap:24px;
    margin-block-start:clamp(44px,4.94vw,79px);text-align:start;
  }
  .zero-item{--digit:clamp(7.5rem,18.75vw,18.75rem);display:flex;align-items:flex-end;gap:clamp(12px,1.7vw,27px)}
  .zero-digit{font-weight:900;font-size:var(--digit);line-height:.72;letter-spacing:-.02em}
  /* dolna krawędź etykiety ~10 px nad podstawą cyfry przy 300 px — skaluje się razem z cyfrą */
  .zero-label{font-weight:500;font-size:clamp(1.1rem,2vw,2rem);line-height:1.2;padding-block-end:calc(var(--digit) * .022)}
  .zero-note{
    font-family:var(--font-copy);font-weight:400;font-size:16px;line-height:22px;
    margin-block-start:clamp(36px,3.4vw,55px);
  }

  /* ---------- historia ---------- */
  .founder{padding-block:clamp(40px,5vw,80px) clamp(60px,7vw,115px);overflow:clip}
  .founder-grid{
    position:relative;
    inline-size:min(1110px,100% - var(--gutter) * 2);margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,537px) minmax(0,1fr);
    column-gap:clamp(32px,4vw,64px);align-items:center;
  }
  .founder-photo{position:relative;z-index:1;border-radius:var(--radius);overflow:clip;background:var(--white)}
  .founder-photo img{inline-size:100%;aspect-ratio:537/720;object-fit:cover}
  .founder-body{position:relative;z-index:1}
  /* postać z logo jako tło cytatu — w PSD warstwa "babeczka grafika" przy 10% krycia */
  .founder-figure{
    position:absolute;z-index:0;pointer-events:none;
    inset-block-start:46px;inset-inline-end:-198px;inline-size:388px;opacity:.1;
  }
  /* line-height 82px ustawia górę glifu „“" dokładnie na górze pola (glif: 80–51 px nad linią bazową) */
  .quote-mark{display:block;font-weight:500;font-size:120px;line-height:82px;block-size:30px;opacity:.2}
  .quote-mark:first-child{margin-block-end:18px}
  .founder blockquote p{
    font-weight:500;font-size:clamp(1.4rem,2.25vw,2.25rem);line-height:1.167;
    max-inline-size:500px;
  }
  .founder blockquote .quote-mark:last-child{margin-block-start:14px}
  .founder-name{font-weight:900;font-size:clamp(1.25rem,1.625vw,1.625rem);line-height:1.1;margin-block-start:41px}
  .founder-credits{font-weight:400;font-size:18px;line-height:24px;margin-block-start:8px}

  /* ---------- skład ---------- */
  .ingredients{background:var(--soft);padding-block:58px 51px}
  .ingredients-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,718px);
    column-gap:52px;align-items:center;padding-inline-end:75px;
  }
  .ingredients-text{text-align:end}
  .ingredients h2{font-weight:900;font-size:clamp(2rem,2.875vw,2.875rem);line-height:.92}
  .ingredients-sub{font-weight:400;font-size:18px;line-height:24px;margin-block-start:10px}
  .ingredients-list{margin-block-start:40px}
  .ingredients-list li{font-weight:500;font-size:22px;line-height:32px}
  .ingredients-list li::after{content:"•";color:var(--yellow);font-size:26px;margin-inline-start:12px;vertical-align:-1px}
  .ingredients-photo{border-radius:var(--radius);overflow:clip;background:var(--white)}
  .ingredients-photo img{inline-size:100%;aspect-ratio:718/475;object-fit:cover}

  /* ---------- galeria ---------- */
  .gallery{padding-block:126px 76px}
  .gallery-track{
    --visible:4;--gap:24px;
    display:flex;gap:var(--gap);
    inline-size:min(1522px,100% - clamp(16px,2.44vw,39px) * 2);margin-inline:auto;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .gallery-track::-webkit-scrollbar{display:none}
  .gallery-track li{
    flex:0 0 calc((100% - var(--gap) * (var(--visible) - 1)) / var(--visible));
    scroll-snap-align:start;
    border-radius:var(--radius);overflow:hidden;background:var(--soft);
  }
  .gallery-track img{inline-size:100%;aspect-ratio:362/363;object-fit:cover}
  .gallery-dots{display:flex;justify-content:center;gap:17px;margin-block-start:46px}
  .gallery-dots{min-block-size:15px}
  .gallery-dots[hidden]{display:flex;visibility:hidden}
  .gallery-dots button{
    box-sizing:border-box;
    inline-size:14px;block-size:15px;border-radius:6px;border:0;padding:0;
    background:var(--dot);cursor:pointer;
  }
  .gallery-dots button[aria-current="true"]{background:var(--yellow)}

  /* ---------- gdzie kupić ---------- */
  .stores{background:var(--yellow);padding-block:88px 87px}
  .stores-head{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
  .stores h2{font-weight:900;font-size:clamp(2rem,2.875vw,2.875rem);line-height:.96}
  .stores-lead{font-weight:500;font-size:19px;line-height:28px;margin-block-start:26px;max-inline-size:34rem}
  /* logo Cukierni to JPG na białym tle — mieszanie usuwa biel tak jak w PSD */
  .stores-logo{flex:none;inline-size:228px;mix-blend-mode:multiply;margin-inline-end:8px;margin-block-start:-31px}
  .stores-grid{
    display:grid;grid-template-columns:539px 241px 243px minmax(0,1fr);
    margin-block-start:44px;
  }
  .stores-city h3{font-weight:700;font-size:24px;line-height:24px;text-transform:uppercase}
  .stores-city ul{margin-block-start:14px}
  .stores-city--split ul{display:grid;grid-template-columns:268px 1fr;grid-auto-flow:column;grid-template-rows:repeat(3,auto)}
  .stores-city li a{
    display:inline-flex;align-items:center;gap:12px;
    font-weight:500;font-size:19px;line-height:34px;
  }
  .stores-city li a:hover{text-decoration:underline;text-underline-offset:4px}
  .stores-city svg{flex:none;inline-size:16px;block-size:20px}
  .stores-cta{display:flex;justify-content:center;margin-block-start:63px}
  .stores-cta .btn{min-inline-size:199px}

  /* ---------- stopka ---------- */
  .site-footer{background:var(--ink);color:var(--white);padding-block:78px 60px}
  .footer-grid{display:grid;grid-template-columns:minmax(0,1fr) 204px 176px;align-items:start}
  .footer-brand{font-weight:900;font-size:36px;line-height:1}
  .footer-desc{font-weight:500;font-size:17px;line-height:28px;opacity:.5;margin-block-start:16px;max-inline-size:20rem}
  .footer-legal{font-weight:500;font-size:14px;line-height:28px;margin-block-start:84px}
  .footer-legal a{opacity:.3;transition:opacity .2s}
  .footer-legal a:hover{opacity:.8}
  .footer-legal span{opacity:.3}
  .footer-col h2{
    font-weight:700;font-size:17px;line-height:22px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--yellow);
  }
  .footer-col ul{margin-block-start:14px}
  .footer-col a{font-weight:500;font-size:15px;line-height:34px}
  .footer-col a:hover{color:var(--yellow)}

  /* ---------- partnerzy ---------- */
  .partners{padding-block:38px 56px}
  .partners ul{display:flex;align-items:center;justify-content:center;gap:clamp(32px,6vw,96px);flex-wrap:wrap}
  .partners a{display:block;transition:opacity .2s}
  .partners a:hover{opacity:.7}
  .partners .p-cukiernia{inline-size:228px;mix-blend-mode:multiply}
  .partners .p-team{inline-size:438px}
  .partners .p-brand{inline-size:231px}
}

/* ============================================================
   Ruch: wejścia przy przewijaniu, parallax, hover.
   Wszystko w prefers-reduced-motion: no-preference; stany startowe
   tylko pod klasą .js, więc bez skryptu treść jest widoczna od razu.
   ============================================================ */
@layer motion {
  :root{--ease-out:cubic-bezier(.16,1,.3,1)}

  @media (prefers-reduced-motion:no-preference){

    /* ---------- wejścia sterowane IntersectionObserver ---------- */
    .js [data-reveal]{
      opacity:0;
      transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out),
                 clip-path 1.2s var(--ease-out),letter-spacing 1.2s var(--ease-out);
      transition-delay:var(--d,0ms);
    }
    .js [data-reveal="up"]{transform:translate3d(0,44px,0)}
    .js [data-reveal="down"]{transform:translate3d(0,-28px,0)}
    .js [data-reveal="left"]{transform:translate3d(-40px,0,0)}
    .js [data-reveal="pop"]{transform:translate3d(0,60px,0) scale(.72);transform-origin:50% 100%}
    .js [data-reveal="photo"]{transform:translate3d(0,56px,0) scale(.96)}
    /* logo Cukierni wbija się jak pieczątka */
    .js [data-reveal="stamp"]{transform:rotate(-28deg) scale(1.25)}
    /* „STREFA 0” zbiera się z rozstrzelonych liter */
    .js [data-reveal="track"]{letter-spacing:.4em}
    /* zdjęcie Tomasza odsłania się od lewej, a obraz w środku lekko się oddala.
       Przycinamy <picture>, nie samą ramkę — w pełni przycięty element jest dla obserwatora niewidoczny */
    .js [data-reveal="curtain"]{opacity:1}
    .js [data-reveal="curtain"] picture{display:block;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease-out) var(--d,0ms)}
    .js [data-reveal="curtain"] img{scale:1.16;transition:scale 1.9s var(--ease-out) .1s}

    /* rozstrzelone litery i powiększone logo nie mogą wypchnąć strony w poziomie */
    .js .zero,.js .stores{overflow-x:clip}

    .js [data-reveal].is-in{opacity:1;transform:none}
    .js [data-reveal="track"].is-in{letter-spacing:-.01em}
    .js [data-reveal="curtain"].is-in picture{clip-path:inset(0)}
    .js [data-reveal="curtain"].is-in img{scale:1}

    /* ---------- wejście strony: zdjęcie hero osiada ze zbliżenia ---------- */
    .hero-media img{animation:hero-settle 2.4s var(--ease-out) both}
    @keyframes hero-settle{from{scale:1.1}to{scale:1}}

    /* ---------- hover ---------- */
    .gallery-track img{transition:scale .9s var(--ease-out)}
    .gallery-track li:hover img{scale:1.06}
    .stores-city li a svg{transition:translate .3s var(--ease-out)}
    .stores-city li a:hover svg{translate:0 -3px}

    /* ---------- parallax: natywne osie przewijania, gdzie są dostępne ---------- */
    @supports (animation-timeline:view()){
      /* postać z logo dryfuje wolniej niż treść i lekko się obraca */
      .founder-figure{animation:figure-drift linear both;animation-timeline:view();animation-range:cover}
      /* zdjęcie produktu przesuwa się wewnątrz zaokrąglonej ramki */
      .ingredients-photo img{scale:1.14;animation:photo-drift linear both;animation-timeline:view();animation-range:cover}

      @media (width > 820px){
        /* tło hero zostaje z tyłu, a tekst odjeżdża szybciej i gaśnie */
        .hero-media{animation:hero-depth linear both;animation-timeline:scroll(root);animation-range:0 900px}
        .hero-content{animation:hero-lift linear both;animation-timeline:scroll(root);animation-range:0 700px}
      }
    }
    @keyframes figure-drift{
      from{transform:translate3d(0,170px,0) rotate(-7deg)}
      to{transform:translate3d(0,-170px,0) rotate(5deg)}
    }
    @keyframes photo-drift{from{translate:0 -6%}to{translate:0 6%}}
    @keyframes hero-depth{to{translate:0 22%}}
    @keyframes hero-lift{to{translate:0 -90px;opacity:.15}}
  }
}

@layer responsive {
  /* animacje wyłączone dla osób, które sobie tego życzą */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .ticker-track{animation:none}
  }

  @media (width <= 1280px){
    .site-logo{inline-size:clamp(200px,20vw,321px)}
    .site-nav ul{gap:clamp(18px,2.4vw,38px)}
    .stores-grid{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));column-gap:24px}
    .stores-city--split ul{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ingredients-grid{padding-inline-end:0}
    .partners .p-team{inline-size:min(438px,100%)}
  }

  /* ---------- tablet poziomy ---------- */
  @media (width <= 1040px){
    /* zera w trzech kolumnach, podpis pod cyfrą */
    .zero-list{justify-content:space-around;gap:16px}
    .zero-item{--digit:clamp(6rem,14vw,9rem);flex-direction:column;align-items:center;text-align:center;gap:14px}
    .zero-label{padding-block-end:0}
    .founder-figure{inset-inline-end:-120px;inline-size:300px}
    .gallery-track{--visible:2.5;--gap:16px}
    .stores-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
    .stores-city--split{grid-column:1 / -1}
    .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px}
    .footer-grid > div:first-child{grid-column:1 / -1}
    .footer-legal{margin-block-start:28px}
  }

  /* ---------- tablet pionowy: menu w panelu, hero w pionie ---------- */
  @media (width <= 820px){
    .site-nav,.social{display:none}
    .nav-toggle{display:grid;place-items:center}
    .site-header-inner{padding-block:20px;align-items:center;flex-wrap:wrap;row-gap:0}
    .site-logo{inline-size:180px}
    /* panel sterowany stanem przycisku; menu i ikony zawijają się pod logo, bez pozycjonowania na sztywno */
    .site-header:has(.nav-toggle[aria-expanded="true"]){background:var(--hero-bg);box-shadow:0 12px 24px -16px rgb(55 59 71 / .35)}
    .site-header:has(.nav-toggle[aria-expanded="true"]) .site-nav{display:block;order:3;flex-basis:100%;margin:12px 0 0;padding:0}
    .site-header:has(.nav-toggle[aria-expanded="true"]) .site-nav ul{flex-direction:column;gap:0}
    .site-header:has(.nav-toggle[aria-expanded="true"]) .site-nav a{
      display:block;padding-block:14px;font-size:16px;border-block-start:1px solid rgb(55 59 71 / .15);
    }
    .site-header:has(.nav-toggle[aria-expanded="true"]) .social{display:flex;order:4;flex-basis:100%;gap:18px;padding-block:14px 4px}

    /* hero w pionie: tekst nad zdjęciem, bo babeczka zasłoniłaby napis */
    .hero{flex-direction:column;min-block-size:0;padding-block:120px 0}
    .hero-media{position:relative;inset:auto;z-index:0;order:2;margin-block-start:36px;inline-size:100%}
    .hero-media img{aspect-ratio:16/10;object-position:96% 50%}
    .hero-content{order:1}
    .ticker{padding-block:18px}
    .ticker-track span{font-size:19px}

    .founder-grid{grid-template-columns:1fr;row-gap:40px}
    .founder-photo{max-inline-size:460px}
    .founder-figure{display:none}
    .founder blockquote p{max-inline-size:none}

    .ingredients{padding-block:48px}
    .ingredients-grid{grid-template-columns:1fr;row-gap:32px}
    .ingredients-text{text-align:start}
    .ingredients-list li::after{content:none}
    .ingredients-list li::before{content:"•";color:var(--yellow);font-size:26px;margin-inline-end:12px;vertical-align:-1px}
    .ingredients-list{margin-block-start:24px}

    .gallery{padding-block:64px 56px}
    .gallery-track{--visible:2.2}
    .gallery-dots{margin-block-start:28px}

    .stores{padding-block:64px}
    .stores-head{flex-direction:column-reverse;gap:8px}
    .stores-logo{inline-size:150px;margin:0}
    .stores-lead br{display:none}

    .site-footer{padding-block:56px 40px}
    .footer-brand{font-size:30px}
    .partners ul{gap:24px 40px;padding-inline:var(--gutter)}
    .partners .p-cukiernia{inline-size:140px}
    .partners .p-team{inline-size:min(320px,100%)}
    .partners .p-brand{inline-size:160px}
  }

  /* ---------- telefon ---------- */
  @media (width <= 560px){
    .hero-media img{aspect-ratio:1/1}
    .hero-actions .btn{flex:1 1 150px}

    /* zera w słupku; stała szerokość bloku trzyma cyfry w jednej linii, a całość na środku */
    .zero-list{flex-direction:column;align-items:center;gap:28px}
    .zero-item{--digit:7.5rem;flex-direction:row;align-items:flex-end;text-align:start;inline-size:min(270px,100%)}
    .zero-label{padding-block-end:calc(var(--digit) * .022)}

    .founder blockquote p{font-size:1.3rem}
    .gallery-track{--visible:1.25}
    .stores-grid{grid-template-columns:1fr}
    .stores-city--split ul{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
    .footer-grid{grid-template-columns:1fr}
  }

  @media (pointer:coarse){
    .gallery-dots button{inline-size:24px;block-size:24px;border-radius:12px;background-clip:content-box;padding:5px}
  }
}