/* Granatowy hero u góry (uwagi klienta 01.09.2026) - ten sam rozmiar co na stronie Kontakt */
  .bhero{position:relative;min-height:clamp(520px,76vh,720px);overflow:hidden;display:flex;background:#0D1220}
  .bhero .kv{position:absolute;inset:0;background:linear-gradient(150deg,#242F65,#141A33 58%,#0D1220)}
  .bhero .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,36,.72),rgba(16,20,36,.28) 56%,rgba(16,20,36,.05))}
  .bhero .in{position:relative;flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px 54px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
  .bhero .crumb{margin-bottom:auto;padding-top:96px;font-size:var(--fs-caption);color:rgba(255,255,255,.75);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .bhero .crumb a:hover{color:#fff}
  .bhero .crumb .sep{opacity:.5}
  .bhero .eyebrow{color:var(--gold)}
  .bhero p{color:rgba(255,255,255,.92);font-size:var(--fs-body-lead);max-width:52ch;margin:20px 0 0}
  @media(max-width:1023.98px){.bhero .in{padding:0 24px 36px}}
  @media(max-width:767.98px){.bhero .in{padding:0 22px 90px}}
  /* Kafelki marek - ten sam styl co karuzela na stronie glownej:
     jasny kafel z kolorowym logo, po najechaniu ciemne tlo + biale logo + opis. */
  .brands{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:20px}
  .bcard{position:relative;height:340px;border-radius:18px;overflow:hidden;border:1px solid var(--line);padding:0;min-height:0;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)),url(../images/BC_pattern_white.webp) center/300px repeat var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);transition:transform .35s,border-color .35s,box-shadow .35s}
  .bcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 26px 52px rgba(20,24,40,.24)}
  .bcard-bg{position:absolute;inset:0;background:var(--g,linear-gradient(150deg,#242F65,#1A2249));opacity:0;transform:scale(1.07);transition:opacity .45s,transform .7s}
  .bcard:hover .bcard-bg{opacity:1;transform:scale(1)}
  .bcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,36,.30) 20%,rgba(16,20,36,.78));opacity:0;transition:opacity .45s}
  .bcard:hover .bcard-shade{opacity:1}
  .bcard-logo{position:relative;z-index:2;font-family:var(--serif);font-size:var(--fs-h4);font-weight:500;letter-spacing:-.01em;padding:0 20px;opacity:0;transition:color .35s,transform .35s,opacity .35s}
  .bcard:hover .bcard-logo{color:#fff;opacity:1;transform:translateY(-30px);text-shadow:0 2px 10px rgba(10,14,28,.55)}
  /* Kolorowe logo na bialym kaflu (przed najechaniem) */
  .bcard-mark{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:94%;height:150px;object-fit:contain;transition:opacity .35s}
  .bcard:hover .bcard-mark{opacity:0}
  /* Biale logo na hover (zamiast nazwy). Gdy istnieje - chowamy tekst nazwy (:has) */
  .bcard-mark-w{position:absolute;z-index:2;top:42%;left:50%;transform:translate(-50%,-50%);width:94%;height:150px;object-fit:contain;opacity:0;transition:opacity .35s;filter:drop-shadow(0 2px 12px rgba(10,14,28,.4))}
  .bcard:hover .bcard-mark-w{opacity:1}
  /* Logotypy o proporcjach bliskich kwadratowi (Old Amsterdam, Sheep Farm, Deli Q, Deli Q Daily) - wyższy box, żeby były optycznie tej samej wielkości co szerokie logotypy */
  .bcard-mark[src*="Sheepfarm"],.bcard-mark-w[src*="Sheepfarm"],.bcard-mark[src*="Deli_Q"],.bcard-mark-w[src*="Deli_Q"]{height:215px;width:96%}
  .bcard-mark[src*="Old_Amsterdam"],.bcard-mark-w[src*="Old_Amsterdam"]{height:160px;width:76%}
  .bcard-mark-w[src*="Old_Amsterdam"],.bcard-mark-w[src*="Sheepfarm"],.bcard-mark-w[src*="Deli_Q"]{top:40%}

  /* Deli Q Selection / Snack - szerokie napisy, mniejszy box z odstępem od krawędzi */
  .bcard-mark[src*="Deli_Q_Selection"],.bcard-mark-w[src*="Deli_Q_Selection"],.bcard-mark[src*="Deli_Q_Snack"],.bcard-mark-w[src*="Deli_Q_Snack"]{width:72%;height:170px}
  /* Szerokie logotypy (Grikios, Formagia) - 20% mniejsze, żeby był odstęp od krawędzi kafla */
  .bcard-mark[src*="GRIKIOS"],.bcard-mark-w[src*="GRIKIOS"],.bcard-mark[src*="Formagia"],.bcard-mark-w[src*="Formagia"],.bcard-mark[src*="Euroser"],.bcard-mark-w[src*="Euroser"],.bcard-mark[src*="Maison_Rosalie"],.bcard-mark-w[src*="Maison_Rosalie"]{width:75%;height:120px}

  .bcard:has(.bcard-mark-w) .bcard-logo{display:none}
  .bcard-desc{position:absolute;left:50%;right:auto;bottom:54px;z-index:2;padding:0 22px;text-align:center;font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(10,14,28,.6);width:100%;max-width:none;box-sizing:border-box;opacity:0;transform:translate(-50%,6px);transition:opacity .35s,transform .35s}
  .bcard:hover .bcard-desc{opacity:1;transform:translate(-50%,0)}
  .bcard-cta{position:absolute;z-index:2;left:0;right:0;bottom:22px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.02em;color:var(--wine);opacity:1;transform:none;transition:color .35s}
  .bcard:hover .bcard-cta{color:#fff}
  @media(max-width:1023.98px){.brands{grid-template-columns:1fr 1fr}}
  @media(max-width:767.98px){.brands{grid-template-columns:1fr}.bcard{height:300px}}
  /* Urzadzenia dotykowe - brak hovera, wiec pokazujemy opis od razu */
  @media(hover:none){
    .bcard-bg,.bcard-shade,.bcard-desc{opacity:1}
    .bcard-bg{transform:none}
    .bcard-mark{opacity:0}
    .bcard-mark-w{opacity:1}
    .bcard-logo{opacity:1;color:#fff}
    .bcard-cta{color:#fff}
    .bcard-desc{transform:translate(-50%,0)}
  }
  /* logotypy marek nieprzeciagalne */
  .brands .bcard,.brands img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}