/* ==========================================================================
   Colberg B2B — układ i komponenty
   Wzorzec układu: b2b.coffeedesk.pl. Paleta i typografia: Colberg.
   ========================================================================== */

/* ——————————————————————————————————————————————— 1. Podstawa */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 var(--cb-fs-body)/1.6 var(--cb-font);
  color: var(--cb-ink);
  background: var(--cb-surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--cb-brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--cb-brand); font-weight: 700; line-height: 1.2; margin: 0 0 16px; }
h1 { font-size: var(--cb-fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--cb-fs-h2); }

/* Widoczny focus na wszystkim, co klikalne. Klawiatura to nie egzotyka —
   przy zamówieniu na 40 pozycji to najszybszy sposób poruszania się. */
:focus-visible {
  outline: 2px solid var(--cb-brand-500);
  outline-offset: 2px;
}

.cb-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cb-shell { max-width: var(--cb-max); margin: 0 auto; padding: 0 var(--cb-gutter); }

/* ——————————————————————————————————————————————— 2. Pasek opiekuna */

.cb-topbar {
  background: var(--cb-brand);
  color: #fff;
  font-size: var(--cb-fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cb-topbar__inner {
  min-height: var(--cb-topbar-h);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cb-topbar a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.cb-topbar__label { color: rgba(255,255,255,.65); }
.cb-topbar__spacer { margin-left: auto; }

.cb-account { position: relative; }
.cb-account__toggle {
  background: none; border: 0; color: #fff; cursor: pointer;
  font: inherit; text-transform: uppercase; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0;
}
.cb-account__menu {
  position: absolute; right: 0; top: 100%; z-index: 60;
  min-width: 260px; background: #fff; color: var(--cb-ink);
  border: 1px solid var(--cb-line);
  box-shadow: 0 8px 24px rgba(6,54,74,.12);
  display: none;
}
.cb-account__menu[data-open="true"] { display: block; }
.cb-account__head { padding: 16px; border-bottom: 1px solid var(--cb-line); }
.cb-account__company { font-weight: 700; text-transform: uppercase; font-size: var(--cb-fs-small); }
.cb-account__nip { font-size: var(--cb-fs-micro); color: var(--cb-ink-muted); margin-top: 4px; }
.cb-account__menu ul { list-style: none; margin: 0; padding: 8px 0; }
.cb-account__menu a {
  display: block; padding: 10px 16px; color: var(--cb-brand);
  text-transform: uppercase; font-size: var(--cb-fs-small); letter-spacing: .04em;
}
.cb-account__menu a:hover { background: var(--cb-brand-050); text-decoration: none; }
.cb-account__logout { padding: 8px 16px 16px; }

/* ——————————————————————————————————————————————— 3. Nagłówek */

.cb-header {
  background: var(--cb-surface);
  border-bottom: 1px solid var(--cb-line);
  position: sticky; top: 0; z-index: 50;
}
.cb-header__inner {
  min-height: var(--cb-header-h);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: center; gap: 32px;
}
.cb-logo { display: inline-flex; align-items: center; }
.cb-logo img { max-height: 48px; width: auto; }
.cb-logo__text { font-weight: 700; font-size: 1.25rem; color: var(--cb-brand); letter-spacing: -0.01em; }
.cb-logo__text span { color: var(--cb-brand-500); }

.cb-search { justify-self: center; width: 100%; max-width: 460px; }
.cb-search form { position: relative; }
.cb-search input[type="search"] {
  width: 100%; border: 0; border-bottom: 1px solid var(--cb-line-strong);
  padding: 10px 40px 10px 0; background: transparent;
  font: inherit; color: var(--cb-ink);
}
.cb-search input::placeholder { color: var(--cb-ink-muted); }
.cb-search input:focus {
  outline: none;
  border-bottom: 2px solid var(--cb-brand-500);
  padding-bottom: 9px;
}
.cb-search button {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--cb-brand); padding: 4px;
}

.cb-header__tools { display: flex; align-items: center; gap: 20px; }
.cb-tool { position: relative; color: var(--cb-brand); display: inline-flex; padding: 8px; }
.cb-tool__count {
  position: absolute; top: 0; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--cb-accent); color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* ——————————————————————————————————————————————— 4. Korpus strony */

.cb-body { display: grid; grid-template-columns: var(--cb-sidebar) minmax(0, 1fr); gap: 40px; padding: 32px 0 64px; }
.cb-main { min-width: 0; }

.cb-breadcrumbs {
  font-size: var(--cb-fs-micro); text-transform: uppercase;
  letter-spacing: .06em; color: var(--cb-ink-muted); margin-bottom: 16px;
}
.cb-breadcrumbs a { color: var(--cb-ink-muted); }
.cb-breadcrumbs a:hover { color: var(--cb-brand); }

/* ——————————————————————————————————————————————— 5. Sidebar kategorii */

.cb-sidebar nav > ul { list-style: none; margin: 0; padding: 0; }
.cb-sidebar li { border-bottom: 1px solid var(--cb-line); }
.cb-sidebar li:last-child { border-bottom: 0; }
.cb-sidebar a {
  display: block; padding: 14px 32px 14px 0;
  color: var(--cb-brand); font-weight: 700;
  text-transform: uppercase; font-size: var(--cb-fs-small); letter-spacing: .04em;
}
.cb-sidebar a:hover { color: var(--cb-brand-600); text-decoration: none; }
.cb-sidebar .current-cat > a { color: var(--cb-accent); }
.cb-sidebar li { position: relative; }

.cb-sidebar__expand {
  position: absolute; right: 0; top: 8px;
  background: none; border: 0; cursor: pointer;
  padding: 6px; color: var(--cb-brand); line-height: 0;
}
.cb-sidebar__expand svg { transition: transform .15s ease; }
.cb-sidebar__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.cb-sidebar ul ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; display: none; }
.cb-sidebar ul ul[data-open="true"] { display: block; }
.cb-sidebar ul ul a { font-weight: 400; text-transform: none; letter-spacing: 0; padding: 8px 0; font-size: var(--cb-fs-body); }
.cb-sidebar ul ul li { border: 0; }

.cb-sidebar__toggle { display: none; }

/* ——————————————————————————————————————————————— 6. Przyciski */

.cb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; border: 1px solid transparent;
  border-radius: var(--cb-radius);
  font: 700 var(--cb-fs-small)/1 var(--cb-font);
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background-color .12s ease, color .12s ease;
  text-decoration: none;
}
.cb-btn:hover { text-decoration: none; }
.cb-btn--primary { background: var(--cb-accent); color: #fff; }
.cb-btn--primary:hover { background: var(--cb-accent-hover); color: #fff; }
.cb-btn--dark { background: var(--cb-brand); color: #fff; }
.cb-btn--dark:hover { background: var(--cb-brand-700); color: #fff; }
.cb-btn--ghost { background: #fff; color: var(--cb-brand); border-color: var(--cb-brand); }
.cb-btn--ghost:hover { background: var(--cb-brand-050); }
.cb-btn--icon { min-width: 44px; padding: 0 12px; }
.cb-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ——————————————————————————————————————————————— 7. Przełącznik netto/brutto */

.cb-toggle {
  display: inline-flex; border: 1px solid var(--cb-brand);
  border-radius: var(--cb-radius); overflow: hidden;
}
.cb-toggle button {
  padding: 10px 28px; background: #fff; color: var(--cb-brand);
  font: 400 var(--cb-fs-body)/1 var(--cb-font); border: 0; cursor: pointer;
}
.cb-toggle button[aria-pressed="true"] { background: var(--cb-brand); color: #fff; font-weight: 700; }

/* Przełącznik nie przeładowuje strony — obie ceny są w DOM-ie,
   zmienia się tylko klasa na <body>. */
body:not(.cb-gross) .cb-price__gross { display: none; }
body.cb-gross .cb-price__net { display: none; }

/* ——————————————————————————————————————————————— 8. Blok ceny */

.cb-price { display: grid; gap: 2px; }
.cb-price__label {
  font-size: var(--cb-fs-micro); text-transform: uppercase;
  letter-spacing: .06em; color: var(--cb-ink-muted);
}
.cb-price__rrp .cb-price__value { color: var(--cb-ink-muted); font-weight: 400; }
.cb-price__yours .cb-price__value {
  color: var(--cb-accent); font-weight: 700; font-size: var(--cb-fs-lead);
}
.cb-price__margin {
  font-size: var(--cb-fs-micro); color: var(--cb-ok); font-weight: 700;
}
.cb-price__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Tabela progów ilościowych */
.cb-tiers { border-top: 1px solid var(--cb-line); margin-top: 12px; padding-top: 12px; }
.cb-tiers__row { display: flex; justify-content: space-between; font-size: var(--cb-fs-small); padding: 4px 0; }
.cb-tiers__qty { color: var(--cb-ink-muted); }
.cb-tiers__price { font-weight: 700; color: var(--cb-accent); }

/* ——————————————————————————————————————————————— 9. Stepper ilości */

.cb-qty { display: inline-flex; align-items: center; border: 1px solid var(--cb-line-strong); border-radius: var(--cb-radius); }
.cb-qty button {
  width: 40px; height: 42px; background: #fff; border: 0; cursor: pointer;
  color: var(--cb-brand); font-size: 18px; line-height: 1;
}
.cb-qty button:hover { background: var(--cb-brand-050); }
.cb-qty input {
  width: 52px; height: 42px; border: 0; text-align: center;
  font: 700 var(--cb-fs-body)/1 var(--cb-font); color: var(--cb-ink);
  -moz-appearance: textfield;
}
.cb-qty input::-webkit-outer-spin-button,
.cb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ——————————————————————————————————————————————— 10. Karta produktu */

.cb-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px; list-style: none; margin: 0; padding: 0;
}
.cb-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  padding: 16px; background: #fff;
  transition: border-color .12s ease;
}
/* Bez cienia i bez unoszenia — płaska krawędź na 1px linii wygląda
   spokojniej i renderuje się szybciej. */
.cb-card:hover { border-color: var(--cb-line-strong); }

.cb-card__fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: none; border: 0; cursor: pointer; color: var(--cb-ink-muted); padding: 6px;
}
.cb-card__fav[aria-pressed="true"] { color: var(--cb-accent); }

.cb-card__media { aspect-ratio: 1; display: grid; place-items: center; background: var(--cb-surface-alt); border-radius: var(--cb-radius); margin-bottom: 16px; }
.cb-card__media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.cb-card__brand { font-size: var(--cb-fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--cb-ink-muted); }
.cb-card__title { font-size: var(--cb-fs-body); font-weight: 400; margin: 4px 0; line-height: 1.4; }
.cb-card__title a { color: var(--cb-ink); }
.cb-card__ean { font-size: var(--cb-fs-micro); color: var(--cb-ink-muted); margin-bottom: 12px; }
.cb-card__price { margin-top: auto; }
.cb-card__actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.cb-card__actions .cb-qty { flex: 0 0 auto; }
.cb-card__actions .cb-btn { flex: 1; }

.cb-stock { font-size: var(--cb-fs-small); display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.cb-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cb-stock--in { color: var(--cb-ok); }
.cb-stock--low { color: var(--cb-warn); }
.cb-stock--out { color: var(--cb-ink-muted); }

/* ——————————————————————————————————————————————— 11. Wiersz produktu (listy, koszyk) */

.cb-row {
  display: grid;
  grid-template-columns: 40px 64px minmax(200px, 1fr) 120px 140px 120px 64px;
  align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--cb-line);
}
.cb-row:hover { background: var(--cb-brand-050); }
.cb-rows__head {
  display: grid;
  grid-template-columns: 40px 64px minmax(200px, 1fr) 120px 140px 120px 64px;
  gap: 16px; padding: 0 0 12px;
  border-bottom: 1px solid var(--cb-line);
  font-size: var(--cb-fs-micro); text-transform: uppercase;
  letter-spacing: .06em; color: var(--cb-ink-muted);
}

/* ——————————————————————————————————————————————— 12. Filtry */

.cb-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.cb-filters select {
  appearance: none; min-width: 200px; padding: 14px 40px 14px 16px;
  border: 1px solid var(--cb-line-strong); border-radius: var(--cb-radius);
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2306364A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
  font: 400 var(--cb-fs-small)/1 var(--cb-font);
  text-transform: uppercase; letter-spacing: .04em; color: var(--cb-brand);
  cursor: pointer;
}
.cb-catalog-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 0 24px; padding-top: 16px; border-top: 1px solid var(--cb-line); }
.cb-instock { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cb-fs-body); cursor: pointer; }

/* Filtry bez migania: stare wyniki zostają przygaszone, zamiast znikać.
   Różnica w kodzie żadna, w odbiorze duża. */
.cb-products.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* ——————————————————————————————————————————————— 13. Darmowa dostawa */

.cb-freeship { border: 1px solid var(--cb-line); border-radius: var(--cb-radius); padding: 16px; margin-bottom: 24px; }
.cb-freeship__text { margin: 0 0 10px; font-size: var(--cb-fs-body); }
.cb-freeship__bar { height: 6px; background: var(--cb-line); border-radius: 999px; overflow: hidden; }
.cb-freeship__bar span { display: block; height: 100%; background: var(--cb-accent-bright); transition: width .3s ease; }
.cb-freeship.is-qualified .cb-freeship__bar span { background: var(--cb-ok); }
.cb-freeship.is-qualified .cb-freeship__text::before { content: "✓ "; color: var(--cb-ok); }

/* ——————————————————————————————————————————————— 14. Tabele panelu */

.cb-table { width: 100%; border-collapse: collapse; }
.cb-table th {
  text-align: left; padding: 0 12px 12px 0;
  font-size: var(--cb-fs-micro); font-weight: 400;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cb-ink-muted);
  border-bottom: 1px solid var(--cb-line);
}
.cb-table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--cb-line); vertical-align: middle; }
.cb-table tr:hover td { background: var(--cb-brand-050); }
.cb-table__number a { font-weight: 700; color: var(--cb-brand); text-decoration: underline; }

/* Status jako tekst z kropką, nie pastylka. Pastylki w ośmiu kolorach
   robią z tabeli choinkę. */
.cb-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cb-fs-body); }
.cb-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cb-status--new { color: var(--cb-ink-muted); }
.cb-status--progress { color: var(--cb-warn); }
.cb-status--done { color: var(--cb-ok); }
.cb-status--cancelled { color: var(--cb-err); }

/* ——————————————————————————————————————————————— 15. Stany puste */

.cb-empty { text-align: center; padding: 64px 24px; }
.cb-empty svg { color: var(--cb-ink-muted); margin-bottom: 24px; }
.cb-empty h2 { color: var(--cb-ink); font-size: var(--cb-fs-h2); }
.cb-empty p { color: var(--cb-ink-muted); margin: 0 0 24px; }

/* ——————————————————————————————————————————————— 16. Panel klienta */

.cb-account-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
.cb-account-nav ul { list-style: none; margin: 0; padding: 0; }
.cb-account-nav li { border-bottom: 1px solid var(--cb-line); }
.cb-account-nav a {
  display: block; padding: 14px 0; color: var(--cb-brand);
  text-transform: uppercase; font-size: var(--cb-fs-small);
  font-weight: 700; letter-spacing: .04em;
}
.cb-account-nav .is-active a { color: var(--cb-accent); }

/* ——————————————————————————————————————————————— 17. Stopka */

.cb-footer { background: var(--cb-brand); color: #fff; padding: 48px 0 32px; margin-top: 64px; }
.cb-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.cb-footer h2 { color: #fff; font-size: var(--cb-fs-body); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 24px; }
.cb-footer a { color: rgba(255,255,255,.85); }
.cb-footer a:hover { color: #fff; }
.cb-footer ul { list-style: none; margin: 0; padding: 0; }
.cb-footer li { margin-bottom: 8px; }
.cb-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 40px; padding-top: 24px;
  font-size: var(--cb-fs-micro); color: rgba(255,255,255,.6);
}

/* ——————————————————————————————————————————————— 18. Logowanie */

.cb-login { max-width: 420px; margin: 64px auto; }
.cb-login .cb-card { padding: 32px; }
.cb-login label { display: block; font-size: var(--cb-fs-small); margin-bottom: 6px; color: var(--cb-ink-muted); }
.cb-login input[type="text"],
.cb-login input[type="password"],
.cb-login input[type="email"] {
  width: 100%; min-height: 44px; padding: 0 12px; margin-bottom: 16px;
  border: 1px solid var(--cb-line-strong); border-radius: var(--cb-radius);
  font: inherit;
}

/* ——————————————————————————————————————————————— 19. Responsywność */

@media (max-width: 1279px) {
  .cb-products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 1023px) {
  :root { --cb-gutter: 16px; }

  .cb-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .cb-sidebar__toggle {
    display: inline-flex; margin-bottom: 16px;
  }
  .cb-sidebar nav {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: 300px; max-width: 85vw; padding: 24px;
    background: #fff; overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(6,54,74,.2);
  }
  .cb-sidebar nav[data-open="true"] { transform: none; }

  .cb-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .cb-logo img { max-height: 36px; }
  .cb-topbar__inner { gap: 12px; font-size: var(--cb-fs-micro); }
}

@media (max-width: 859px) {
  /* Tabele zamieniają się w karty — jedno zamówienie = jedna karta,
     z etykietami przy wartościach. */
  .cb-table thead { display: none; }
  .cb-table tr { display: block; border: 1px solid var(--cb-line); border-radius: var(--cb-radius); padding: 16px; margin-bottom: 16px; }
  .cb-table td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 6px 0; }
  .cb-table td::before { content: attr(data-label); color: var(--cb-ink-muted); font-size: var(--cb-fs-micro); text-transform: uppercase; letter-spacing: .06em; }

  .cb-row, .cb-rows__head { grid-template-columns: 56px minmax(0,1fr) auto; }
  .cb-rows__head { display: none; }

  .cb-account-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 479px) {
  .cb-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cb-card { padding: 12px; }
  h1 { font-size: 1.75rem; }

  /* Zamówienie B2B ma często 30 pozycji — przewijanie do góry po każdej
     z nich jest męczące, więc podsumowanie zostaje na ekranie. */
  .cb-cart-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--cb-line);
    padding: 12px var(--cb-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    box-shadow: 0 -4px 16px rgba(6,54,74,.08);
  }
}

@media (min-width: 480px) { .cb-cart-bar { display: none; } }

@media print {
  .cb-topbar, .cb-header, .cb-sidebar, .cb-footer, .cb-cart-bar { display: none; }
}

/* ——————————————————————————————————————————————— 20. Uzupełnienia */

/* Strony bez sidebara: panel konta, koszyk, kasa, treści informacyjne. */
.cb-body--full { grid-template-columns: minmax(0, 1fr); }

.cb-pagination { margin-top: 40px; }
.cb-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cb-pagination a, .cb-pagination span {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  color: var(--cb-brand); font-weight: 700; text-decoration: none;
}
.cb-pagination .current { background: var(--cb-brand); color: #fff; border-color: var(--cb-brand); }
.cb-pagination a:hover { background: var(--cb-brand-050); text-decoration: none; }

.cb-content { max-width: 68ch; }
.cb-content h2 { margin-top: 32px; }
.cb-content ul, .cb-content ol { padding-left: 20px; }

/* Komunikaty WooCommerce w stylu platformy, zamiast domyślnych zielonych pasków. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 0 0 24px; padding: 16px;
  border: 1px solid var(--cb-line); border-left: 4px solid var(--cb-brand-500);
  border-radius: var(--cb-radius); background: var(--cb-surface-alt);
  font-size: var(--cb-fs-body);
}
.woocommerce-error { border-left-color: var(--cb-err); }
.woocommerce-message { border-left-color: var(--cb-ok); }