/* =========================================================================
   Sklep B2B — warstwa marki Info-GLOBAL Fastening na motywie classic
   ŹRÓDŁO PRAWDY: MyObsidianVault/Info-GLOBAL - sprzedaż - zarządzanie/
                  brandbook/DESIGN_info_global.md  (przy rozjeździe wygrywa vault)
   Wyciąg operacyjny: C:\Users\lukas\Projects\SklepB2B\DESIGN.md

   Charakter: narzędzie pracy, nie wystawa. Baza JASNA, jeden akcent,
   gęstość zamiast przestrzeni.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap&subset=latin,latin-ext');

:root {
  --brand-red:       #E31C2A;
  --brand-red-hover: #C41A26;
  --dark:            #242424;
  --dark-100:        #434343;
  --dark-200:        #545454;
  --gray-text:       #6F6F6F;
  --gray-line:       #888888;
  --gray-bg:         #F2F2F2;
  --white:           #FFFFFF;
  --stock-in:        #1B7A3D;
  --stock-in-bg:     #E8F3EC;
  --stock-low:       #8A5A00;
  --stock-low-bg:    #FBF3E0;

  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;

  --radius: 0;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- podstawa ---------- */

body, body#checkout, .page-authentication {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 28px; font-weight: 600; }
h3, .h3 { font-size: 22px; font-weight: 600; }
h4, .h4 { font-size: 18px; font-weight: 600; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font);
  color: var(--dark);
}

/* kąt prosty wszędzie poza elementami naprawdę okrągłymi */
.btn, .card, .form-control, .custom-select, .alert, .modal-content,
.dropdown-menu, .input-group, .page-header, .block-category,
.products article, .product-miniature, .thumbnail-container,
input, select, textarea, .badge, .tags, .nav-link, .search-widget input {
  border-radius: var(--radius) !important;
}

/* płasko — cień tylko dropdown i modal, dokładnie wg kanonu */
.card, .page-header, .products article, .product-miniature,
.thumbnail-container, .btn, .form-control, #header, #footer,
.block-category, .page-content, .header-top {
  box-shadow: none !important;
}
.dropdown-menu, .modal-content { box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; }

/* wymiary, indeksy SKU, normy — cyfry tabelaryczne */
.product-reference, .product-quantity, .price, table td, table th,
[class*="reference"], [class*="sku"], .spec-value {
  font-variant-numeric: tabular-nums;
}

/* ruch minimalny — tylko kolor i krycie */
.btn, a, .form-control, .product-miniature, input, select, textarea {
  transition: color .15s, background-color .15s, border-color .15s, opacity .15s;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* szerokości: treść 1280, katalog 1440 */
#wrapper .container, #content-wrapper .container { max-width: 1280px; }
body#category #wrapper .container, body#product #wrapper .container { max-width: 1440px; }

/* ---------- przyciski ---------- */

.btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid transparent;
}

/* główna akcja — jedna na ekran */
.btn-primary, button[type="submit"].btn-primary, #submit-login {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--white) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, #submit-login:hover {
  background: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !important;
  color: var(--white) !important;
}
.btn-primary:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

/* druga akcja — CIEMNA, nie biała (korekta wg kanonu) */
.btn-secondary {
  background: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--dark-100) !important;
  border-color: var(--dark-100) !important;
  color: var(--white) !important;
}

/* trzeciorzędna */
.btn-tertiary, .btn-ghost, .btn-outline-secondary, .btn-outline-primary {
  background: var(--white) !important;
  border: 1px solid var(--gray-line) !important;
  color: var(--dark) !important;
}
.btn-tertiary:hover, .btn-ghost:hover,
.btn-outline-secondary:hover, .btn-outline-primary:hover {
  background: var(--gray-bg) !important;
  color: var(--dark) !important;
}

.btn:disabled, .btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- formularze ---------- */

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], input[type="number"],
select, textarea {
  font-family: var(--font);
  font-size: 16px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--gray-line);
  background: var(--white);
  color: var(--dark);
  box-shadow: none;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-red);
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  box-shadow: none;
}

.form-control-label, label.form-control-label, .form-group label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark-200);
  margin-bottom: var(--sp-sm);
}
.form-control-comment, .help-block, small.form-text { color: var(--gray-text); font-size: 14px; }

/* błąd: obramowanie + komunikat tekstem, nie sam czerwony obrys */
.form-control.is-invalid, .has-error .form-control { border-color: var(--brand-red); }
.invalid-feedback, .help-block-error, .has-error .help-block {
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--sp-xs);
}
.invalid-feedback::before, .help-block-error::before { content: "! "; font-weight: 700; }

/* ---------- nagłówek: tło BIAŁE (korekta wg kanonu) ---------- */

#header, .header-top, #header .header-nav {
  background: var(--white);
  color: var(--dark);
  border: 0;
  border-bottom: 1px solid var(--gray-line);
}
#header a, #header .header-nav a { color: var(--dark); }
#header a:hover { color: var(--brand-red); }
#header .top-menu a.current, #header .nav-link.active {
  color: var(--dark);
  border-bottom: 3px solid var(--brand-red);
}

/* ---------- stopka: ciemna ---------- */

#footer, .footer-container {
  background: var(--dark);
  color: var(--gray-bg);
  border: 0;
  padding-top: var(--sp-3xl);
}
#footer a, .footer-container a { color: var(--gray-bg); }
#footer a:hover, .footer-container a:hover { color: var(--white); text-decoration: underline; }
#footer h3, .footer-container h3, #footer .h3 { color: var(--white); }

/* ---------- strona logowania — jedyny ekran widoczny bez konta ---------- */

#authentication .page-header, .page-authentication .page-header {
  background: transparent;
  border: 0;
  padding: 0 0 var(--sp-lg);
}
#authentication .page-header h1, .page-authentication h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#authentication .card, .page-authentication .card, #authentication .login-form {
  background: var(--white);
  border: 1px solid var(--gray-line);
  padding: var(--sp-xl);
}
#authentication .forgot-password a, .page-authentication .forgot-password a {
  color: var(--dark);
  text-decoration: underline;
  font-size: 14px;
}
#authentication .forgot-password a:hover { color: var(--brand-red); }
#authentication .no-account a, .page-authentication .no-account a {
  color: var(--brand-red);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- komunikaty ---------- */

.alert { border: 1px solid var(--gray-line); background: var(--gray-bg); color: var(--dark); }
.alert-danger  { border-left: 4px solid var(--brand-red); }
.alert-success { border-left: 4px solid var(--stock-in); }
.alert-warning { border-left: 4px solid var(--stock-low); }

/* ---------- karta produktu ---------- */

.product-miniature .thumbnail-container, .products article {
  background: var(--white);
  border: 1px solid var(--gray-line);
  padding: var(--sp-lg);
  cursor: pointer;
}
/* hover zmienia obramowanie — nie skaluje, żeby rząd się nie rozjechał */
.product-miniature .thumbnail-container:hover, .products article:hover {
  border-color: var(--dark);
  transform: none;
}
.product-miniature .product-title a { font-size: 22px; font-weight: 600; color: var(--dark); }
.product-miniature .product-reference { font-size: 14px; font-weight: 500; color: var(--dark-200); }

/* ---------- plakietka dostępności: tekst + tło, nie sam kolor ---------- */

.product-available, .badge-in-stock {
  display: inline-block; padding: var(--sp-xs) var(--sp-sm);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--stock-in); background: var(--stock-in-bg);
}
.product-last-items, .badge-low-stock {
  display: inline-block; padding: var(--sp-xs) var(--sp-sm);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--stock-low); background: var(--stock-low-bg);
}
.product-unavailable, .badge-on-order {
  display: inline-block; padding: var(--sp-xs) var(--sp-sm);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--dark-200); background: var(--gray-bg);
}

/* ---------- tabela specyfikacji ---------- */

.product-features table, .data-sheet, table.table { width: 100%; border-collapse: collapse; }
.product-features th, .data-sheet th, table.table th {
  background: var(--dark); color: var(--white);
  font-size: 18px; font-weight: 600;
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
}
.product-features td, .data-sheet td, table.table td {
  font-size: 14px;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--gray-line);
  border-left: 0; border-right: 0;      /* tylko poziome kreski */
}
.product-features tr:nth-child(even) td, table.table tr:nth-child(even) td { background: var(--gray-bg); }
/* liczby do prawej, tekst do lewej */
.data-sheet td.numeric, table.table td.numeric, td[data-type="num"] { text-align: right; }

@media (max-width: 767px) {
  .product-features, .data-sheet, .table-responsive-b2b {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .product-features table th:first-child, .product-features table td:first-child,
  .data-sheet th:first-child, .data-sheet td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--white);
  }
  .product-features th:first-child, .data-sheet th:first-child { background: var(--dark); }
}

/* ---------- próbnik RAL: 40x40, zawsze obramowany ---------- */

.ral-swatch, [class*="color-swatch"],
.custom-checkbox input[type="checkbox"] + span.color,
.variant-links .color {
  width: 40px !important; height: 40px !important;
  border: 1px solid var(--gray-line) !important;
  border-radius: 0 !important;
}
.ral-swatch.selected, .custom-checkbox input[type="checkbox"]:checked + span.color {
  border: 2px solid var(--brand-red) !important;
}
.ral-swatch.selected + .ral-label { font-weight: 700; }

/* =========================================================================
   STRONA LOGOWANIA — pelnoekranowy uklad marki
   Jedyny ekran widoczny bez konta, wiec nie moze wygladac jak demo sklepu.
   Ukrywa naglowek, stopke, okruszki i newsletter; formularz Presty zostaje.
   ========================================================================= */

body#authentication #header,
body#authentication #footer,
body#authentication .footer-container,
body#authentication .breadcrumb,
body#authentication #left-column,
body#authentication #right-column,
body#authentication .block_newsletter,
body#authentication #notifications,
body#authentication .header-banner,
body#authentication .header-top,
body#authentication .header-nav { display: none !important; }

body#authentication #wrapper,
body#authentication #content-wrapper,
body#authentication #main,
body#authentication .page-content,
body#authentication .page-authentication {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
}
body#authentication #wrapper > .container { max-width: none !important; padding: 0 !important; }
body#authentication { background: var(--white); }

.b2b-auth {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-height: 100vh;
}

/* lewa: ciemna kolumna marki */
.b2b-auth__mark {
  background: var(--dark);
  color: var(--white);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b2b-auth__brands {
  font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: 2px; text-transform: uppercase;
}
.b2b-auth__brands span { display: block; margin-top: 6px; color: #949494; }
.b2b-auth__big {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700; line-height: 1; letter-spacing: -3px;
  margin: 0; color: var(--white);
}
.b2b-auth__big em {
  font-style: normal; font-weight: 400; display: block; letter-spacing: -2px;
}
.b2b-auth__note { font-size: 14px; color: #949494; max-width: 34ch; margin: 0; }

/* prawa: formularz */
.b2b-auth__panel {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 48px clamp(24px, 5vw, 72px);
  min-width: 0;
}
.b2b-auth__form { width: 100%; max-width: 400px; }
.b2b-auth__h {
  font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--dark);
}
.b2b-auth__lead { margin: 0 0 32px; color: var(--gray-text); font-size: 16px; }

/* formularz Presty w naszej skorze — etykiety NAD polami, nie obok */
.b2b-auth .login-form .form-group.row { display: block; margin-bottom: 20px; }
.b2b-auth .login-form .form-control-label {
  display: block; width: 100%; text-align: left; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dark-200); margin-bottom: 8px;
}
.b2b-auth .login-form .col-md-6,
.b2b-auth .login-form .col-md-4,
.b2b-auth .login-form .col-md-3 { flex: 0 0 100%; max-width: 100%; padding: 0; }
.b2b-auth .login-form .form-control { width: 100%; }
.b2b-auth .login-form .input-group .input-group-btn { display: none; }  /* przycisk "POKAŻ" */
.b2b-auth .login-form .forgot-password { margin: 0 0 24px; padding: 0; text-align: left; }
.b2b-auth .login-form .forgot-password a { font-size: 14px; color: var(--dark); }
.b2b-auth .login-form .form-footer { margin: 0; }
.b2b-auth .login-form button[type="submit"],
.b2b-auth .login-form #submit-login { width: 100%; }
.b2b-auth hr { display: none; }

.b2b-auth__aside {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--gray-line);
  font-size: 14px; color: var(--gray-text);
}
.b2b-auth__aside a { color: var(--brand-red); font-weight: 600; text-decoration: underline; }

.b2b-auth__foot {
  margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--gray-text);
}
.b2b-auth__foot a { font-size: 12px; color: var(--gray-text); }

@media (max-width: 900px) {
  .b2b-auth { grid-template-columns: 1fr; min-height: 0; }
  .b2b-auth__mark { padding: 32px 24px; gap: 32px; }
  .b2b-auth__big { font-size: clamp(40px, 10vw, 64px); letter-spacing: -2px; }
  .b2b-auth__panel { padding: 32px 24px 48px; }
}
@media (max-width: 640px) {
  .b2b-auth__big { font-size: 40px; letter-spacing: -1.5px; }
  .b2b-auth__note { display: none; }
}

/* ---- logowanie: korekty po ogledzinach na zywo (05.08) ---- */

/* kontener Presty nadal trzymal marginesy i szerokosc — zerujemy calą sciezke */
body#authentication section#wrapper,
body#authentication section#wrapper > .container,
body#authentication #content-wrapper,
body#authentication #main,
body#authentication #main > .page-content,
body#authentication .js-content-wrapper {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  flex: 0 0 100% !important;
}
body#authentication .notifications-container { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* kolumna marki na pelna wysokosc ekranu */
.b2b-auth { min-height: 100vh; align-items: stretch; }
.b2b-auth__mark { height: 100%; }

/* pola na pelna szerokosc — bootstrapowa siatka col-md-3/6/3 rozbita */
.b2b-auth .login-form .form-group.row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
}
.b2b-auth .login-form .form-group.row > * ,
.b2b-auth .login-form .col-md-3,
.b2b-auth .login-form .col-md-6,
.b2b-auth .login-form .js-input-column {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}
.b2b-auth .login-form .form-control-comment:empty { display: none !important; }
.b2b-auth .login-form .input-group { display: block !important; }
.b2b-auth .login-form .input-group .form-control { width: 100% !important; }

/* karta formularza bez podwojnej ramki — ramka jest tylko wokol calosci */
.b2b-auth .login-form { border: 0 !important; padding: 0 !important; background: transparent !important; }

/* ---- logowanie: dwie przyczyny zmierzone w przegladarce (05.08) ---- */
/* 1) bootstrapowy .row ma ujemne marginesy -15px => poziomy pasek przewijania */
body#authentication #wrapper .row,
body#authentication #content-wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 2) header.page-head zabieral 49px nad ukladem */
body#authentication .page-head,
body#authentication header.page-head,
body#authentication #main > .page-header,
body#authentication #js-product-list-header { display: none !important; }

body#authentication { overflow-x: hidden; }
body#authentication section#main { margin-top: 0 !important; }