/* =====================================================================
   KOLOR WIODĄCY: jedna zmienna --brand, wszystko inne to jej jaśniejsze / ciemniejsze odcienie.
   Wartość ustawia picker (assets/area/brand.js, zapis w localStorage, klucz vn-brand).
   ===================================================================== */
:root {
  --brand: #D3C9CA;
  --paper: color-mix(in oklab, var(--brand) 18%, #fff);
  --soft: color-mix(in oklab, var(--brand) 27%, #fff);
  --line: color-mix(in oklab, var(--brand) 42%, #fff);
  --ink: color-mix(in oklab, var(--brand) 10%, #111);
  --muted: color-mix(in oklab, var(--brand) 18%, #4a4a4a);
  --accent: color-mix(in oklab, var(--brand) 60%, #000);
  --accent-ink: color-mix(in oklab, var(--brand) 45%, #000);
  --accent-soft: color-mix(in oklab, var(--brand) 24%, #fff);
  --footer: color-mix(in oklab, var(--brand) 14%, #000);
  --brand-glass: color-mix(in oklab, var(--brand) 18%, #fff 82%);
}
@supports (color: oklch(from red l c h)) {
  :root {
    /* akcent zawsze dość ciemny, żeby biały napis na przycisku miał kontrast */
    --accent: oklch(from var(--brand) min(l, .47) c h);
    --accent-ink: oklch(from var(--brand) min(l, .47) c h / 1);
    --accent-ink: oklch(from var(--accent) calc(l - .08) c h);
  }
}

/* przyciski, linki, metki, ramki: wszystko z jednego koloru */
.btn, .tp-add { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:hover, a.tp-add:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-add.is-off { background: transparent; color: var(--muted); border-color: var(--line); }
.tp-badges span, .tp-badges .is-new { background: var(--accent); color: #fff; }
.tp-badges .is-sale { background: var(--accent-ink); color: #fff; }
.tp-badges .is-best { background: var(--paper); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
main a.link, .section-title .link { color: var(--accent); border-color: var(--accent); }
.link:hover { color: var(--accent-ink); }
.ptile { border-color: var(--line); }
::selection { background: var(--accent); color: #fff; }
.stars { background: linear-gradient(90deg, var(--accent) calc(var(--r) * 20%), var(--line) 0); -webkit-background-clip: text; background-clip: text; }
.header-in, .site-header { border-bottom-color: var(--line); }
.js .site-header.solid, .js .no-hero .site-header, .js .no-hero .site-header:not(.solid) { background: color-mix(in srgb, var(--paper) 50%, transparent); }
.js .site-header.menu-open { background: var(--paper); }
.bottomnav { background: color-mix(in srgb, var(--paper) 96%, transparent); }
.mega { box-shadow: 0 30px 50px color-mix(in srgb, var(--accent) 12%, transparent); }
.news-card { background: color-mix(in srgb, var(--paper) 96%, transparent); }
.pdp-count { background: color-mix(in srgb, var(--paper) 90%, transparent); }

/* stopka: gradient z koloru wiodącego do czerni */
.site-footer {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 78%, #3a3a3a) 0%,
    color-mix(in oklab, var(--brand) 32%, #000) 38%,
    color-mix(in oklab, var(--brand) 12%, #000) 72%,
    #0a0909 100%);
  color: #fff;
}

/* ---------- picker koloru (metka po prawej, tylko strona główna; panel pod metką, zmiana na żywo) ---------- */
.bp { position: fixed; z-index: 90; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; font: 500 .75rem/1 var(--f); }
.bp-tab { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 11px 14px; border: 0; background: var(--accent); color: #fff; cursor: pointer; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.bp-tab i { width: 16px; height: 16px; border: 2px solid #fff; background: var(--brand); display: block; }
.bp-panel { display: none; flex-direction: column; gap: 12px; width: 236px; padding: 14px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-right: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.bp.is-open .bp-panel { display: flex; }
.bp-pad { position: relative; height: 150px; touch-action: none; cursor: crosshair; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, hsl(var(--bp-h, 350), 100%, 50%)); }
.bp-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); pointer-events: none; }
.bp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 0; padding: 0; background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); cursor: pointer; }
.bp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 22px; background: #fff; border: 1px solid rgba(0, 0, 0, .55); cursor: grab; }
.bp-hue::-moz-range-thumb { width: 8px; height: 22px; border-radius: 0; background: #fff; border: 1px solid rgba(0, 0, 0, .55); cursor: grab; }
.bp-line { display: flex; gap: 8px; }
.bp-line input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); font: 400 .875rem var(--f); text-transform: uppercase; background: #fff; color: var(--ink); }
.bp-reset { padding: 0 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; font: 500 .6875rem/1 var(--f); letter-spacing: .1em; text-transform: uppercase; }
.bp-sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bp-sw button { aspect-ratio: 1; border: 1px solid rgba(0, 0, 0, .12); cursor: pointer; padding: 0; }
@media (max-width: 1020px) { .bp { top: auto; bottom: 90px; transform: none; } }
.fcol-h { border-bottom-color: color-mix(in srgb, #fff 28%, transparent); }
.bp-eye { flex: none; width: 38px; border: 1px solid var(--line); background: #fff; color: var(--accent); cursor: pointer; display: grid; place-items: center; padding: 0; }
.bp-eye[hidden] { display: none; }
.bp-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bp-eye:hover { background: var(--accent); color: #fff; }
.bp-line { gap: 6px; }
.bp-line input { padding: 9px 6px; font-size: .8125rem; letter-spacing: 0; }
.bp-reset { padding: 0 8px; letter-spacing: .06em; }