/* mflookbook: zdjęcia z punktami produktów. Tokeny redesignu (--mf-*) z wartościami zapasowymi równymi tokenom,
   więc działa też bez 00-tokens.css. Animujemy tylko transform i opacity.
   A2 (23.10.2026, G12/G21): bez własnej palety --mflb-* i bez własnych przycisków - przyciski to .mf-btn (01-base),
   link pod nagłówkiem to .mf-sec-link, ceny .mf-price / .mf-price-old jak w kafelku; pin = przycisk 44 x 44
   z widocznym kwadratem 32 px; promienie v2 (znacznik xs, przycisk sm, panel md, karta lg). */
.mflb,.mflb__card{color:var(--mf-text,#1b2328);font-family:var(--mf-font-sans,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif)}
.mflb{margin:0 0 var(--mf-section,48px)}
.mflb-group__title,.mflb__title{margin:0;font-size:var(--mf-text-xl,28px);line-height:var(--mf-leading-xl,1.2);font-weight:var(--mf-weight-bold,700);letter-spacing:var(--mf-tracking-xl,-.02em);color:var(--mf-text-strong,#0e1519);text-transform:none;text-wrap:balance}
.mflb-group__title{margin-bottom:var(--mf-stack,16px)}
.mflb-group--product .mflb__title{font-size:var(--mf-text-lg,20px);letter-spacing:var(--mf-tracking-lg,-.01em)}
/* naglowek jak .mf-sec-head: tytul i opis z lewej, link "Przejdz do..." z prawej (na telefonie pod spodem) */
.mflb__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 var(--mf-space-4,16px);margin:0 0 var(--mf-stack,16px)}
.mflb__head-t{max-width:68ch}
.mflb__desc{margin:var(--mf-space-1,4px) 0 0;color:var(--mf-text-muted,#616a71);font-size:var(--mf-text-ui,15px);line-height:var(--mf-leading-ui,1.5)}

/* Zdjęcie: proporcje zarezerwowane, bez przesunięć układu */
.mflb__media{position:relative;width:100%;height:auto;border-radius:var(--mf-radius-lg,16px);background:var(--mf-surface-sunken,#f8fafc)}
.mflb__media picture,.mflb__img{display:block;width:100%;height:100%;border-radius:inherit}
.mflb__img{object-fit:cover;border-radius:inherit}
/* klikalny obszar na przycisku narysowanym w grafice (ten sam adres co .mflb__cta) */
.mflb__hot{position:absolute;z-index:1;border-radius:var(--mf-radius-full,999px)}
.mflb__pins{list-style:none;margin:0;padding:0}
.mflb__spot{position:absolute;width:0;height:0;z-index:var(--mf-z-raised,10)}

/* Pin: cel dotyku 44 x 44, widoczny kwadracik 32 px (span) */
.mflb__pin{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:var(--mf-tap,44px);height:var(--mf-tap,44px);
  margin:0;padding:0;border:0;background:none;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--mf-dur-instant,100ms) var(--mf-ease-press,cubic-bezier(.2,0,0,1))}
.mflb__pin>span{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--mf-radius-xs,4px);background:rgb(255 255 255/.94);color:var(--mf-text-strong,#0e1519);
  font-size:var(--mf-text-sm,14px);font-weight:var(--mf-weight-semibold,600);line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1px rgb(1 33 51/.14),0 2px 10px rgb(1 33 51/.32);transition:background-color var(--mf-dur-fast,160ms),color var(--mf-dur-fast,160ms)}
.mflb__pin:active{transform:translate(-50%,-50%) scale(var(--mf-press-scale,.97))}
.mflb__pin:is([aria-expanded=true],.is-hl)>span{background:var(--mf-action,#007cb3);color:#fff}
.mflb__pin:focus-visible{outline:none}
.mflb__pin:focus-visible>span{outline:2px solid var(--mf-focus,#007cb3);outline-offset:3px}
.mflb__pin--off>span{background:rgb(255 255 255/.8);color:var(--mf-oos-600,#5c656b)}
.mflb__pin--current>span{box-shadow:0 0 0 3px var(--mf-brand-500,#1597d5),0 2px 10px rgb(1 33 51/.32)}
@media (hover:hover){.mflb__pin:hover>span{background:var(--mf-action,#007cb3);color:#fff}}

/* Lista pod zdjęciem (bez JS to jest cała funkcja) */
.mflb .mflb__list-title{margin:var(--mf-space-5,20px) 0 var(--mf-space-2,8px);font-size:var(--mf-text-lg,20px);line-height:var(--mf-leading-lg,1.3);font-weight:var(--mf-weight-semibold,600);letter-spacing:0;color:var(--mf-text-strong,#0e1519);text-transform:none}
.mflb__count{color:var(--mf-text-muted,#616a71);font-weight:var(--mf-weight-regular,400)}
.mflb__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--mf-space-2,8px);grid-template-columns:1fr}
@media (min-width:576px){.mflb__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.mflb__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mf-space-3,12px)}}
@media (min-width:1200px){.mflb--home .mflb__list,.mflb--shortcode .mflb__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* runda 2: telefon - rzad kart przewijany poziomo (jak karuzele), zamiast pionowej listy */
@media (max-width:767.98px){.mflb__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(85%,320px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--mf-gutter,16px));padding:0 var(--mf-gutter,16px) 2px;scroll-padding-inline:var(--mf-gutter,16px)}.mflb__list::-webkit-scrollbar{display:none}.mflb__item{scroll-snap-align:start}}
.mflb__item{border-radius:var(--mf-radius-lg,16px);background:var(--mf-surface,#fff);box-shadow:inset 0 0 0 1px var(--mf-border,#dae1e5);transition:box-shadow var(--mf-dur-fast,160ms)}
.mflb__item.is-hl{box-shadow:inset 0 0 0 2px var(--mf-action,#007cb3)}
.mflb__item--current{box-shadow:inset 0 0 0 2px var(--mf-brand-500,#1597d5)}
.mflb__prod{display:grid;grid-template-columns:auto 56px minmax(0,1fr);gap:var(--mf-space-3,12px);align-items:start;padding:var(--mf-space-3,12px)}
.mflb__num{display:grid;place-items:center;min-width:24px;height:24px;border-radius:var(--mf-radius-xs,4px);background:var(--mf-surface-sunken,#f8fafc);color:var(--mf-text-strong,#0e1519);font-size:var(--mf-text-xs,12px);font-weight:var(--mf-weight-semibold,600);font-variant-numeric:tabular-nums}
.mflb__thumb{display:block;border-radius:var(--mf-radius-md,12px);overflow:hidden;background:var(--mf-surface-sunken,#f8fafc)}
.mflb__thumb img{display:block;width:56px;height:70px;object-fit:contain;mix-blend-mode:multiply}
.mflb__info{min-width:0}
.mflb__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--mf-text-strong,#0e1519);font-size:var(--mf-text-sm,14px);line-height:1.4;font-weight:var(--mf-weight-medium,500);text-decoration:none}
.mflb__name:hover{color:var(--mf-link,#006594);text-decoration:underline;text-underline-offset:2px}
.mflb__here{display:inline-block;margin-top:var(--mf-space-1,4px);padding:2px var(--mf-space-2,8px);border-radius:var(--mf-radius-full,999px);background:var(--mf-brand-50,#eef9ff);color:var(--mf-brand-800,#004d72);font-size:var(--mf-text-xs,12px);font-weight:var(--mf-weight-semibold,600)}
/* cena: .mf-price / .mf-price--sale / .mf-price-old (01-base), Omnibus x13pricehistory w nowym wierszu */
.mflb__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--mf-space-2,8px);margin:var(--mf-space-1,4px) 0 0}
.mflb__price .x13pricehistory-product-list{flex-basis:100%;margin:0;padding:0;text-align:left}
.mflb__avail{margin:2px 0 0;font-size:var(--mf-text-xs,12px)}
.mflb__avail--ok{color:var(--mf-success-700,#1d6835)}
.mflb__avail--off{color:var(--mf-oos-600,#5c656b)}
.mflb__actions{display:flex;flex-wrap:wrap;gap:var(--mf-space-2,8px);margin-top:var(--mf-space-3,12px)}
.mflb__cart{margin:0}

/* Dymek (od 768 px) */
.mflb__card{position:absolute;z-index:var(--mf-z-dropdown,200);width:300px;max-width:calc(100vw - 32px);border-radius:var(--mf-radius-md,12px);
  background:var(--mf-surface,#fff);box-shadow:var(--mf-shadow-md,0 2px 4px rgba(1,33,51,.04),0 8px 24px rgba(1,33,51,.1)),var(--mf-ring-hairline,inset 0 0 0 1px rgba(1,33,51,.08));opacity:0;transform:scale(.96);
  transition:opacity var(--mf-dur-fast,160ms) var(--mf-ease-out,cubic-bezier(.22,1,.36,1)),transform var(--mf-dur-base,240ms) var(--mf-ease-out,cubic-bezier(.22,1,.36,1))}
.mflb__card.is-open{opacity:1;transform:none}
.mflb__card:focus{outline:none}
.mflb__card .mflb__prod{grid-template-columns:1fr;padding:var(--mf-space-4,16px);gap:var(--mf-space-3,12px)}
.mflb__card .mflb__num{display:none}
.mflb__card .mflb__thumb{width:112px;justify-self:start}
.mflb__card .mflb__thumb img{width:112px;height:140px}
.mflb__card .mflb__name{font-size:var(--mf-text-ui,15px);padding-right:36px}
.mflb__card .mflb__actions .mflb__btn{flex:1 1 auto}
.mflb__close{position:absolute;top:6px;right:6px;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:var(--mf-radius-sm,8px);background:transparent;color:var(--mf-text-muted,#616a71);cursor:pointer}
.mflb__close:hover{background:var(--mf-surface-sunken,#f8fafc);color:var(--mf-text-strong,#0e1519)}
.mflb__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.75;fill:none}

/* Panel od dołu (telefon) */
.mflb__scrim{position:fixed;inset:0;z-index:var(--mf-z-overlay,1000);background:var(--mf-scrim,rgba(14,21,25,.42));opacity:0;transition:opacity var(--mf-dur-base,240ms) var(--mf-ease-out,cubic-bezier(.22,1,.36,1))}
.mflb__scrim.is-open{opacity:1}
.mflb__card--sheet{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:var(--mf-z-modal,1020);width:auto;max-width:none;max-height:85vh;overflow:auto;
  border-radius:var(--mf-radius-lg,16px) var(--mf-radius-lg,16px) 0 0;box-shadow:var(--mf-shadow-lg,0 8px 16px rgba(1,33,51,.06),0 24px 72px rgba(1,33,51,.18));opacity:1;transform:translateY(100%);
  padding-bottom:env(safe-area-inset-bottom,0);overscroll-behavior:contain;
  transition:transform var(--mf-dur-slow,360ms) var(--mf-ease-out,cubic-bezier(.22,1,.36,1))}
.mflb__card--sheet.is-open{transform:none}
.mflb__card--sheet::before{content:"";display:block;width:36px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--mf-border,#dae1e5)}
.mflb__card--sheet .mflb__prod{grid-template-columns:96px minmax(0,1fr);align-items:start}
.mflb__card--sheet .mflb__thumb{width:96px}
.mflb__card--sheet .mflb__thumb img{width:96px;height:120px}
.mflb__card--sheet .mflb__btn{min-height:var(--mf-btn-h,48px)}
html.mflb-locked{overflow:hidden}

.mflb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .mflb__card,.mflb__card--sheet,.mflb__scrim,.mflb__pin,.mflb__pin>span{transition:opacity 1ms}
  .mflb__card,.mflb__card--sheet{transform:none}
  .mflb__card--sheet{opacity:0}.mflb__card--sheet.is-open{opacity:1}
}
@media (forced-colors:active){.mflb__pin>span{border:2px solid ButtonText}}
@media print{.mflb__pins,.mflb__hot{display:none}}