:root{
  --wo-white:#FFFFFF;
  --wo-black:#000000;
  --wo-bg:#f4f6f8;
  --wo-panel:#f6f7f9;
  --wo-bg-footer:#eaebed;
  --wo-line:#edf0f4;
  --wo-text:#1f2937;
  --wo-text-link:#edf0f4;
  --wo-muted:#8a93a0;
  --wo-soft:#f6f7f9;
  --wo-accent:#ff9f2d;

  --wo-shadow: 0 18px 45px rgba(16,24,40,.10);
  --wo-r: 16px;
  --wo-header-h: 66px;

  --wo-icon:#9aa3af;
  --wo-icon-strong:#111;
  --wo-chip-bg:#fbfcfe;
  --wo-col-border: var(--wo-line);
  --wo-sticky-top: 16px;

  --wo-gap-x: 14px;     /* odstęp między kolumnami */
  --wo-gap-y: 18px;     /* odstęp pionowy */
  --wo-card-r: 16px;

  --wo-fill: #111827;   /* „łatki” */
  --wo-fill-op: .22;

  --wo-border-radius: 5px;



      --glo-bar-height: 56px;

      --glo-bg-success: #16a34a;
      --glo-bg-error:   #e11d48;
      --glo-bg-info:    #4f46e5;

      --glo-text: #fff;
      --glo-text-dim: rgba(255,255,255,.86);
}

html[data-theme="dark"]{
  --wo-white:#000000;
  --wo-black:#FFFFFF;
  --wo-bg:#0b0f14;
  --wo-panel:#0f1620;
  --wo-bg-footer:#080a0e;
  --wo-line:#1b2633;
  --wo-text:#e5e7eb;
  --wo-text-link:#edf0f4;
  --wo-muted:#9aa4b2;
  --wo-soft:#111b26;
  --wo-accent:#ff9f2d;

  --wo-shadow: 0 22px 60px rgba(0,0,0,.45);
  --wo-icon:#a7b0bf;
  --wo-icon-strong:#e5e7eb;
  --wo-chip-bg:#101a25;
  --wo-col-border:#1b2633;

  --wo-fill: #0b1220;
  --wo-fill-op: .35;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* background: var(--wo-bg); */
  color: var(--wo-text);
}

/* ==== GENERAL ==== */
.hand { cursor: pointer }
.clear { clear:both }
.clicked { color: var(--wo-accent) !important }
.new {border-color: var(--wo-accent) !important; color: var(--wo-accent); }
.promoted {border-color: var(--wo-accent) !important; color: var(--wo-accent); }


.wo-mobile {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .wo-mobile {
    display: inline-flex;
  }
  .wo-mobile-big-logo{
    display: none;
  }
}

a {color: var(--wo-black); text-decoration: none !important;}
a:hover {color: var(--wo-accent); }

a.wo-black {color: var(--wo-white); text-decoration: none !important;}
a.wo-black:hover {color: var(--wo-accent); }

.wo-input-row{ display:flex; gap:8px; align-items:center; }
.wo-clear-input{ background:none; border:0; cursor:pointer; opacity:.6; }
.wo-clear-input:hover{ opacity:1; }

h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .2px;
}

h2{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:.2px;
}

.wo-board{
  width:100vw;
  height:100vh;
  background: var(--wo-black);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.wo-icon-stack{
  position: relative;
  display: inline-block;
  line-height: 1;
  color: var(--wo-accent);
}

.wo-icon-stack > .fa-certificate{
  font-size: 1.4em;
}

.wo-icon-overlay{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-size: .65em;
  opacity: .95;
  pointer-events: none;
  color: #FFFFFF;
}

/* ===== HEADER ===== */
.wo-header{
  height: var(--wo-header-h);
  background: var(--wo-bg);
  flex: 0 0 auto;
}
.wo-header-container{
  height:100%;
  padding: 0 18px;
  display:grid;
  grid-template-columns: 260px 1fr 260px;
  align-items:center;
  gap: 14px;
}
.wo-header-left{display:flex;align-items:center;gap:12px;min-width:0;}
.wo-header-logo{
  align-items:center;gap:10px;height:42px;padding:8px 10px;
  border-radius:12px;text-decoration:none;color:var(--wo-text);
}
.wo-header-logo:hover{background:color-mix(in srgb, var(--wo-soft) 70%, transparent);}
.wo-header-logo img{height:22px;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(16,24,40,.10));}
html[data-theme="dark"] .wo-header-logo img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));}
.wo-header-logo-text{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.wo-header-logo-title{font-weight:900;font-size:12px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.wo-header-logo-sub{font-size:10px;color:var(--wo-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;margin-top:2px;}

.wo-header-center{display:flex;align-items:center;justify-content:center;min-width:0;}
.wo-header-search{flex:1 1 auto;max-width:620px;position:relative;margin:0 auto;}
.wo-header-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--wo-icon);font-size:13px;}
.wo-header-search input{
  width:100%;height:40px;border-radius: var(--wo-border-radius);border:0;
  background:color-mix(in srgb, var(--wo-soft) 70%, var(--wo-panel));
  padding:0 14px 0 38px;outline:none;font-size:12px;color:var(--wo-text);
}
.wo-header-search input::placeholder{color:var(--wo-muted);}

.wo-header-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;}
.wo-header-iconbtn,.wo-theme-btn{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  border:1px solid transparent;background:transparent;cursor:pointer;color:var(--wo-icon);position:relative;
}
.wo-header-iconbtn:hover,.wo-theme-btn:hover{background:var(--wo-soft);border-color:var(--wo-line);color:var(--wo-icon-strong);}
.wo-header-dot{
  position:absolute;right:10px;top:10px;width:8px;height:8px;border-radius:999px;
  background: var(--wo-accent);
  border: 2px solid var(--wo-panel);
}

/* ===== HEADER AVATAR ===== */
.wo-header-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--wo-line);
  background: var(--wo-soft);
  overflow: hidden;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wo-header-avatar:hover{
  background: var(--wo-soft);
  border-color: color-mix(in srgb, var(--wo-line) 60%, var(--wo-accent));
}

.wo-header-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* opcjonalnie: mała kropka statusu */
.wo-header-avatar .wo-status-dot{
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--wo-good);
  border: 2px solid var(--wo-panel);
  right: -1px;
  bottom: -1px;
}
.wo-header-avatar-wrap{
  position: relative;
  width: 34px;
  height: 34px;
}

/* ===== TOASTS W HEADERZE ===== */
.wo-header-right{ position: relative; } /* kotwica dla absolutnych toastów */

.wo-header-toasts{
  position: absolute;
  right: 0;
  top: calc(100% + 10px); /* pod headerem */
  display: grid;
  gap: 10px;
  z-index: 999;
  width: min(380px, calc(100vw - 36px));
  pointer-events: none; /* klik działa tylko na samych toastach */
}

/* łatwa skala całego toastu */
:root{
  --wo-toast-scale: 1;               /* 1 = jak ustawisz niżej, 1.1 / 1.2 = większy */
  --wo-toast-min-w: 320px;
  --wo-toast-max-w: 520px;
  --wo-toast-stripe-w: 8px;
}

.wo-toast{
  pointer-events: auto;
  border-radius: var(--wo-border-radius);
  border: 1px solid var(--wo-line);
  background: var(--wo-panel);

  display: grid;
  grid-template-columns: var(--wo-toast-stripe-w) 1fr auto;
  overflow: hidden;

  /* większe „ciało” */
  min-width: min(var(--wo-toast-min-w), 92vw);
  max-width: min(var(--wo-toast-max-w), 92vw);

  /* jeśli toast jest w miejscu gdzie font bywa mały, to to go ratuje */
  font-size: calc(14px * var(--wo-toast-scale));

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.wo-toast.wo-show{
  opacity: 1;
  transform: translateY(0);
}

.wo-toast-stripe{ background: var(--wo-info); }
.wo-toast--success .wo-toast-stripe{ background: var(--wo-good); }
.wo-toast--error   .wo-toast-stripe{ background: var(--wo-bad); }
.wo-toast--warning .wo-toast-stripe{ background: var(--wo-warn); }

.wo-toast-body{
  padding: calc(12px * var(--wo-toast-scale)) calc(14px * var(--wo-toast-scale));
  min-width: 0;
}

.wo-toast-title{
  font-weight: 900;
  font-size: calc(14px * var(--wo-toast-scale)); /* było 12px */
  margin: 0 0 4px;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--wo-text) 92%, transparent);
}

.wo-toast-msg{
  margin: 0;
  font-size: calc(13px * var(--wo-toast-scale)); /* było 11px */
  line-height: 1.45;                              /* było 1.35 */
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
}

.wo-toast-actions{
  padding: calc(10px * var(--wo-toast-scale)) calc(10px * var(--wo-toast-scale)) calc(10px * var(--wo-toast-scale)) 0;
  display: grid;
  place-items: start;
}

.wo-toast-close{
  width: calc(36px * var(--wo-toast-scale));  /* było 30px */
  height: calc(36px * var(--wo-toast-scale));
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--wo-muted);
  cursor: pointer;
}

.wo-toast-close:hover{
  background: var(--wo-soft);
  border-color: var(--wo-line);
  color: var(--wo-text);
}


/* Kolory typów — dodaj, jeśli nie masz */
:root{
  --wo-good:#22c55e;
  --wo-bad:#ef4444;
  --wo-warn:#f59e0b;
  --wo-info:#3b82f6;
}

/* ===== SCROLL AREA ===== */
.wo-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display:flex;
  flex-direction:column;
}

/* ===== GRID ===== */
.wo-gridwrap{
  display:grid;
  min-height: 0;
  flex: 0 0 auto;
  background: var(--wo-panel);
}

.wo-gridwrap-cols-1{
  grid-template-columns: 260px 1fr; /* kol2+kol3 to galeria (będzie span) */
}

.wo-gridwrap-cols-2{
  grid-template-columns: 260px 1fr 1fr; /* kol2+kol3 to galeria (będzie span) */
}
.wo-gridwrap-cols-3{
  grid-template-columns: 260px 380px 1fr;
}

.wo-col{
  padding: 16px 16px 18px;
  min-height: 0;
  overflow: visible;
  background: var(--wo-panel);
}

.wo-left-sticky{ position: static; }
.wo-left-sticky.wo-is-sticky{ position: sticky; top: var(--wo-sticky-top); }

/* ===== LOGO (SIDEBAR) ===== */
.wo-logo{ margin: 6px 0 18px; border:0; background:transparent; box-shadow:none; }
.wo-logo-link{ display:flex;align-items:center;justify-content:center;text-decoration:none;padding: 6px 0; }
.wo-logo-img{
  width: min(220px, 100%); height: 84px; object-fit: contain; display:block;
  filter: drop-shadow(0 14px 30px rgba(16,24,40,.14));
}
html[data-theme="dark"] .wo-logo-img{ filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); }

/* ===== LEFT NAV ===== */
.wo-side-nav{margin-top:10px;padding:10px 6px 6px;}
.wo-side-link{
  display:flex;align-items:center;gap:10px;padding:14px 14px;border-radius:12px;
  text-decoration:none;color:var(--wo-muted);font-size:14px;position:relative;
}
.wo-side-link i{width:18px;text-align:center;font-size:13px;color:var(--wo-icon);}
.wo-side-link:hover{ background: var(--wo-line); }
.wo-side-subtitle{
  margin:12px 10px 8px;font-size:10px;color:color-mix(in srgb, var(--wo-muted) 70%, transparent);
  letter-spacing:.9px;
}
.wo-side-link.wo-is-active{color:var(--wo-text);font-weight:700;background:transparent;}
.wo-side-link.wo-is-active::before{
  content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:999px;background:var(--wo-accent);
}
.wo-side-red-dot{ margin-left:auto;width:6px;height:6px;border-radius:999px;background:var(--wo-accent);opacity:.9; }
.wo-side-bottom{
  margin-top:18px;padding-top:12px;
  display:flex;gap:10px;justify-content:space-between;
}
.wo-side-square{
  flex:1 1 0;height:44px;border-radius:5px;border:1px solid var(--wo-line);
  background:var(--wo-chip-bg);color:var(--wo-icon);display:grid;place-items:center;cursor:pointer;
  margin-bottom: 2px;
}
.wo-side-square:hover{color:var(--wo-icon-strong);background:var(--wo-soft);}

/* małe kółko zamiast ikony w .wo-side-link */
.wo-side-mini{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--wo-line);
  background: var(--wo-chip-bg);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.wo-side-mini img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* fallback (np. gdy brak zdjęcia) */
.wo-side-mini span{
  font-size: 10px;
  font-weight: 900;
  color: var(--wo-muted);
  line-height: 1;
}

/* ===== GALLERY COL (span kol2+kol3) ===== */
.wo-gallery-col{
  grid-column: 2 / 4;
  min-height: 0;
  padding: 16px 16px 18px;
}

.wo-gallery-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin: 2px 0 14px;
}
.wo-gallery-title h2{margin:0;font-size:18px;font-weight:950;letter-spacing:.2px;}
.wo-gallery-title p{
  margin:4px 0 0;font-size:12px;color:color-mix(in srgb, var(--wo-muted) 88%, transparent);
}

.wo-gallery-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.wo-chip{
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--wo-border-radius);border:1px solid var(--wo-line);
  background:var(--wo-chip-bg);color:var(--wo-muted);font-size:12px;cursor:pointer;user-select:none;
}
.wo-chip i{font-size:10px}
.wo-chip:hover{ background: var(--wo-soft); color: var(--wo-text); }

/* ===========================
    GALERIA – MASONRY (jak u Ciebie)
    =========================== */
.wo-gallery{
  position: relative;
  margin: 0 auto;
}

/* Desktop: 4 kolumny */
.wo-gallery-sizer,
.wo-gallery-item{
  width: 25%;
}

.wo-gallery-item{
  float: left;
  margin-bottom: var(--wo-gap-y);
}

.wo-gallery::after{
  content:"";
  display:block;
  clear:both;
}

.wo-gallery-link{
  display:block;
  position:relative;
  margin: 0 calc(var(--wo-gap-x) / 2);
  border-radius: var(--wo-card-r);
  overflow:hidden;
  /* background:#e5e5e5; */
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(16,24,40,.10);
  transform: translateZ(0); 
}

.wo-gallery-link-aspect{
  aspect-ratio: 3 / 4;   /* dobierz proporcję pod swoje miniatury */
}
html[data-theme="dark"] .wo-gallery-link{ box-shadow: 0 18px 46px rgba(0,0,0,.40); }

.wo-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.wo-gallery-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  padding: 10px 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0));
  color:#fff;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.wo-shot-author{
  display:inline-flex;align-items:center;gap:8px;
  font-size: 12px;
  opacity:.95;
}
.wo-shot-avatar{
  width:28px;height:28px;border-radius:8px;object-fit:cover;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(15,23,42,.25);
  background: rgba(255,255,255,.1);
}
.wo-shot-author-name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;
  font-weight:800;
}

.wo-shot-topline{
  display:flex;flex-wrap:wrap;gap:2px;align-items:center;
  font-size: 12px;
  opacity: .92;
}
.wo-shot-pill{
  padding: 3px 9px;
  border-radius:var(--wo-border-radius);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(8,16,28,.30);
  backdrop-filter: blur(8px);
  font-size: 11px;
  white-space:nowrap;
}
.wo-shot-dot{opacity:.65}

.wo-shot-bottom{
  display:flex;align-items:center;gap:10px;
  margin-top: 2px;
}

.wo-shot-actions{display:inline-flex;align-items:center;gap:8px;}
.wo-shot-action-btn{
  width:42px;height:42px;border-radius:var(--wo-border-radius);border:none;
  background: rgba(15, 23, 42, 0.72);
  color: #f9fafb;
  display:inline-flex;align-items:center;justify-content:center;
  font-size: .85rem;
  cursor:pointer;
  transition: background-color 120ms ease-out, transform 100ms ease-out, box-shadow 120ms ease-out;
}

.wo-shot-mini-action-btn {
  width:25px;height:25px;
  font-size: 80%;
}

.wo-shot-action-btn:hover{
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.wo-shot-action-btn:active{transform: translateY(0); box-shadow:none;}







/* ===========================
    PLACEHOLDERY (łatki) — to jest klucz
    =========================== */
.wo-gallery-fill-rect{
  position:absolute;
  background: var(--wo-fill);
  opacity: var(--wo-fill-op);
  border-radius: var(--wo-card-r);
  pointer-events:none;
}

/* PAGINATION */
.wo-pagination{display:flex;justify-content:center;gap:10px;padding:22px 0 10px;}
.wo-page{
  width:40px;height:40px;border-radius:5px;
  background: color-mix(in srgb, var(--wo-fill) 25%, transparent);

  display:grid;place-items:center;color:var(--wo-text);
  font-weight:800;cursor:pointer;user-select:none;
}
.wo-page:hover{background:var(--wo-soft);color:var(--wo-text);}
.wo-page.wo-is-active{background:var(--wo-accent);border-color:color-mix(in srgb, #2d6bff 70%, #000);color:#fff; opacity: 1;}

.wo-page-dots { cursor: default; }
.wo-page-arrow.wo-is-disabled { opacity: .4; pointer-events: none; }


/* BACK TO TOP */
.wo-topbtn{
  position: fixed;right: 35px;bottom: 55px;width: 44px;height: 44px;border-radius: 999px;
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-panel) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 45px rgba(16,24,40,.12);
  display: grid;place-items: center;color: var(--wo-icon-strong);cursor: pointer;
  opacity: 0;transform: translateY(12px);pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
  z-index: 50;
}
html[data-theme="dark"] .wo-topbtn{
  background: color-mix(in srgb, var(--wo-panel) 65%, transparent);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  color: var(--wo-text);
}
.wo-topbtn:hover{ background: var(--wo-soft); }
.wo-topbtn.wo-is-visible{opacity: 1;transform: translateY(0);pointer-events: auto;}
.wo-topbtn i{ font-size: 14px; }

/* ==== FOOTER ==== */
.wo-footer{
  background: var(--wo-bg-footer);
  padding: 30px 35px 18px;
  flex: 0 0 auto;
}
.wo-footer-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 18px;
  align-items:start;
}
.wo-footer-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color: var(--wo-text);margin-bottom: 10px;}
.wo-footer-mark img{
  height: 22px;width: auto;display:block;object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(16,24,40,.10));
}
html[data-theme="dark"] .wo-footer-mark img{ filter: drop-shadow(0 14px 26px rgba(0,0,0,.45)); }
.wo-footer-title{font-weight:900;letter-spacing:.2px;font-size:12px;line-height:1.1;}
.wo-footer-desc{margin:0;color: color-mix(in srgb, var(--wo-muted) 88%, transparent);font-size:11px;line-height:1.6;max-width:380px;}
.wo-footer-kicker{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.wo-footer-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--wo-border-radius);border:1px solid var(--wo-line);
  background:var(--wo-chip-bg);color:var(--wo-muted);font-size:11px;text-decoration:none;white-space:nowrap;
}
.wo-footer-pill:hover{background:var(--wo-soft);color:var(--wo-text);}
.wo-footer-col h4{margin:2px 0 10px;font-size:16px;font-weight:900;color:color-mix(in srgb, var(--wo-text) 88%, transparent);}
.wo-footer-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;}
.wo-footer-list a{
  display:inline-flex;align-items:center;gap:10px;color:color-mix(in srgb, var(--wo-muted) 92%, transparent);
  text-decoration:none;font-size:12px;padding:6px 8px;border-radius:var(--wo-border-radius);width:fit-content;
}
.wo-footer-list a i{width:16px;text-align:center;color:var(--wo-icon);}
.wo-footer-list a:hover{color:var(--wo-text);background:var(--wo-line);border-color:var(--wo-line);}
.wo-footer-news{
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-soft) 60%, var(--wo-panel));
  border-radius: 5px;
  padding: 14px;
}
.wo-footer-news p{margin:0 0 10px;font-size:11px;color:color-mix(in srgb, var(--wo-muted) 88%, transparent);line-height:1.5;}
.wo-footer-form{display:flex;gap:10px;}
.wo-footer-form input{
  flex:1 1 auto;height:38px;border-radius:var(--wo-border-radius);border:1px solid var(--wo-line);
  background:var(--wo-panel);padding:0 14px;font-size:12px;color:var(--wo-text);outline:none;
}
.wo-footer-form input::placeholder{ color: var(--wo-muted); }
.wo-footer-form button{
  height:38px;padding:0 14px;border-radius:var(--wo-border-radius);border:1px solid transparent;
  background: color-mix(in srgb, var(--wo-accent) 92%, #fff);
  color:#111;font-weight:800;cursor:pointer;white-space:nowrap;
}
.wo-footer-form button:hover{ background: var(--wo-accent); }
.wo-footer-bottom{
  margin-top:18px;padding-top:14px;border-top:1px solid color-mix(in srgb, var(--wo-line) 80%, transparent);
  display:flex;align-items:center;justify-content:space-between;gap:12px;color:color-mix(in srgb, var(--wo-muted) 88%, transparent);
  font-size:11px;flex-wrap:wrap;
}
.wo-footer-social{display:flex;align-items:center;gap:10px;}
.wo-footer-social a{
  width:34px;height:34px;border-radius:var(--wo-border-radius);border:1px solid var(--wo-line);background:var(--wo-chip-bg);
  display:grid;place-items:center;color:var(--wo-muted);text-decoration:none;
}
.wo-footer-social a:hover{background:var(--wo-soft);color:var(--wo-text);}


/* ==== Abount ==== */
.wo-about{
  display:grid;
  grid-template-columns: .8fr 1.2fr; /* zdjęcie większe niż formularz */
  gap: 18px;
  min-height: calc(100vh - var(--wo-header-h) - 160px);
  align-items: stretch;
  padding: 6px;
}





/* ==== GLO ==== */
    /*
    body.glo-bar-open{
      padding-top: calc(var(--glo-bar-height) + env(safe-area-inset-top));
    }
      */

    /* ✅ Overlay: ciemniejszy + lekki blur (żeby było WIDAĆ) */
    .glo-overlay{
      position: fixed; inset: 0;
      background: rgba(0,0,0,.48);                 /* było .22 */
      backdrop-filter: blur(2px);                  /* minimalnie */
      -webkit-backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s ease;
      z-index: 9990; /* pod paskiem */
    }
    .glo-overlay.glo-is-visible{
      opacity: 1;
      pointer-events: auto;
    }

    .glo-bar{
      position: fixed;
      left: 0; right: 0; top: 0;

      height: calc(var(--glo-bar-height) + env(safe-area-inset-top));
      padding-top: env(safe-area-inset-top);

      box-shadow: none;
      border: 0;

      transform: translateY(-110%);
      opacity: 0;
      transition: transform .20s ease, opacity .16s ease;
      z-index: 9999;
    }
    .glo-bar.glo-is-visible{
      transform: translateY(0);
      opacity: 1;
    }

    .glo-bar.glo-success{ background: var(--glo-bg-success); }
    .glo-bar.glo-error{   background: var(--glo-bg-error); }
    .glo-bar.glo-info{    background: var(--glo-bg-info); }

    .glo-bar-inner{
      height: var(--glo-bar-height);
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 0 14px;
      color: var(--glo-text);
      font-size: 14px;
      letter-spacing: .2px;
    }

    .glo-bar-icon{ font-size: 16px; opacity: .95; line-height: 1; }
    .glo-bar-text{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

    .glo-bar-meta{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--glo-text-dim);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .9px;
    }

    .glo-bar-close{
      width: 38px; height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.35);
      background: transparent;
      color: rgba(255,255,255,.96);
      cursor: pointer;
      display:flex; align-items:center; justify-content:center;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .glo-bar-close:hover{ background: rgba(255,255,255,.14); }

    @media (max-width: 520px){
      :root{ --glo-bar-height: 60px; }
      .glo-bar-inner{ grid-template-columns: 20px 1fr auto; gap: 10px; padding: 0 10px; }
      .glo-bar-meta{ display:none; }
      .glo-bar-close{ width: 44px; height: 44px; border-radius: 14px; }
      .glo-bar-text{ font-size: 13px; }
    }

    @media (prefers-reduced-motion: reduce){
      body{ transition:none; }
      .glo-bar{ transition:none; }
      .glo-overlay{ transition:none; }
    }





/* ==== MENU MOBILE ==== */
/* Przycisk domyślnie ukryty (desktop) */
.wo-side-toggle {
  display: none;

}

/* Mobile */
@media (max-width: 768px) {
  .wo-side-toggle {
    display: inline-flex;
  }

  /* zwijanie/rozwijanie z animacją */
  .wo-side-nav {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 220ms ease, opacity 160ms ease;
  }

  .wo-side-nav.wo-is-open {
    max-height: 2000px; /* wystarczająco duże na menu */
    opacity: 1;
    pointer-events: auto;
  }
}

/* Użytkownicy z ograniczaniem animacji */
@media (prefers-reduced-motion: reduce) {
  .wo-side-nav {
    transition: none;
  }
}



:root{
  /* scrollbars */
  --wo-scroll-track: var(--wo-bg);
  --wo-scroll-thumb: color-mix(in srgb, var(--wo-muted) 70%, var(--wo-panel));
  --wo-scroll-thumb-hover: color-mix(in srgb, var(--wo-muted) 85%, var(--wo-panel));
}

html[data-theme="dark"]{
  --wo-scroll-track: var(--wo-bg);
  --wo-scroll-thumb: color-mix(in srgb, var(--wo-muted) 55%, var(--wo-panel));
  --wo-scroll-thumb-hover: color-mix(in srgb, var(--wo-muted) 75%, var(--wo-panel));
}

/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--wo-scroll-thumb) var(--wo-scroll-track);
}

/* Chrome/Edge/Safari */
html::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
html::-webkit-scrollbar-track{
  background: var(--wo-scroll-track);
}
html::-webkit-scrollbar-thumb{
  background: var(--wo-scroll-thumb);
  border-radius: 999px;
  border: 3px solid var(--wo-scroll-track);
}
html::-webkit-scrollbar-thumb:hover{
  background: var(--wo-scroll-thumb-hover);
}