/* ============================================================
   SANDERSON — Karta produktu do wyceny (redesign)
   Grid „Zaznacz modele, które chcesz wycenić".
   Trzy warianty pod jednym korzeniem .qc-wrap:
     .qc-grid--current  → stan obecny (odtworzony ze screena)
     .qc-grid--ladder   → Propozycja A (drabinka specyfikacji)
     .qc-grid--toggle   → Propozycja B (karta wybieralna)
   Wymaga: colors_and_type.css (tokeny + fonty)
   ============================================================ */

.qc-wrap {
  background: var(--bone-100);
  font-family: var(--font-body);
  color: var(--fg-on-light-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(32px, 4vw, 52px);
}

.qc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 28px) clamp(16px, 1.5vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Wspólny kafel zdjęcia ───────────────────────────────── */
.qc-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid rgba(20, 17, 13, 0.10);
  border-radius: var(--radius-tight);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.qc-img::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg,
    transparent 0, transparent 16px,
    rgba(20, 17, 13, 0.025) 16px, rgba(20, 17, 13, 0.025) 17px);
  pointer-events: none;
}
.qc-img img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; padding: 16px; position: relative; z-index: 1;
}
.qc-fig {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(20, 17, 13, 0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-tight);
  z-index: 3;
}
.qc-fig-no {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 12px; color: var(--brass-400); font-variant-numeric: tabular-nums;
}
.qc-fig-lbl {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-2);
}

/* Shared typographic atoms */
.qc-code {
  font-family: var(--font-body); font-size: var(--fs-nano); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--fg-on-light-3); font-variant-numeric: tabular-nums;
}
.qc-name {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: 21px; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--fg-on-light-1); margin: 0;
}
.qc-desc {
  font-family: var(--font-body); font-size: 12px; line-height: 1.45;
  color: var(--fg-on-light-2); margin: 0; text-wrap: pretty;
}

/* ============================================================
   STAN OBECNY  (.qc-grid--current) — wierne odtworzenie
   ============================================================ */
.qc-grid--current .qc-card { display: flex; flex-direction: column; }
.qc-grid--current .qc-img { background: #fff; }
/* faint ring checkbox (jak na screenie) */
.qc-grid--current .qc-oldcheck {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(20, 17, 13, 0.22); background: rgba(255,255,255,0.6);
}
.qc-grid--current .qc-body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 5px; }
.qc-grid--current .qc-name { font-size: 18px; }
.qc-grid--current .qc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px dotted rgba(20,17,13,0.2);
}
.qc-grid--current .qc-cap {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: 17px; color: var(--fg-on-light-1); font-variant-numeric: tabular-nums;
}
.qc-grid--current .qc-cap sub { font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--fg-on-light-3); vertical-align: baseline; margin-left: 3px; }
.qc-grid--current .qc-pricewrap { text-align: right; }
.qc-grid--current .qc-pricelbl { display: block; font-size: 9px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-light-3); margin-bottom: 2px; }
.qc-grid--current .qc-price { font-size: 13px; color: var(--fg-on-light-2); font-variant-numeric: tabular-nums; }
.qc-grid--current .qc-price b { font-size: 16px; color: var(--fg-on-light-1); font-weight: 700; }
.qc-grid--current .qc-actions {
  display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px;
}
.qc-grid--current .qc-add { font-size: 10px; font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-on-light-1); }
.qc-grid--current .qc-see { font-size: 12px; color: var(--fg-on-light-3); }

/* ============================================================
   PROPOZYCJA A  (.qc-grid--ladder) — drabinka specyfikacji
   ============================================================ */
.qc-grid--ladder .qc-card {
  display: flex; flex-direction: column;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  padding: 8px; margin: -8px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
/* 8px wewn. padding pochłania ujemny margines kart, żeby ramka zaznaczenia
   skrajnych kart nie wystawała poza grid / pasek (krawędzie równo z .qc-tray) */
.qc-grid--ladder { padding: 8px; align-items: stretch; }
/* SZ12 — body wypełnia kartę, drabinka+akcje docelowo na dole → przyciski „Dodaj/Zobacz" w równej linii w wierszu */
.qc-grid--ladder .qc-body { flex: 1 1 auto; }
.qc-grid--ladder .qc-card.is-sel { border-color: var(--brass-500); background: rgba(176,144,88,0.06); }
.qc-grid--ladder .qc-card.is-sel .qc-img { border-color: var(--brass-500); }

/* Checkbox — wyraźny, kwadratowy, klikalny */
.qc-check {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 11px 0 0;
  background: #fff; border: 1.5px solid rgba(20,17,13,0.28);
  border-radius: var(--radius-pill);
  cursor: pointer; user-select: none;
  box-shadow: 0 1px 3px rgba(20,17,13,0.10);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              padding var(--dur-fast) var(--ease-out);
}
.qc-check-box {
  width: 30px; height: 30px; margin: -1.5px; flex: none;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  border: 1.5px solid rgba(20,17,13,0.32);
  background: #fff;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.qc-check-box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.qc-check-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-on-light-2); white-space: nowrap;
}
.qc-check:hover { border-color: var(--brass-500); }
.qc-check:hover .qc-check-box { border-color: var(--brass-500); }
.qc-card.is-sel .qc-check { border-color: var(--brass-500); background: var(--brass-500); }
.qc-card.is-sel .qc-check-box { background: #fff; border-color: #fff; }
.qc-card.is-sel .qc-check-box svg { opacity: 1; transform: scale(1); }
.qc-card.is-sel .qc-check-lbl { color: #fff; }

.qc-grid--ladder .qc-body { padding: 15px 2px 0; display: flex; flex-direction: column; gap: 0; }
.qc-grid--ladder .qc-code { margin-bottom: 8px; }
.qc-grid--ladder .qc-name { margin-bottom: 4px; }
.qc-grid--ladder .qc-desc { margin-bottom: 4px; }

/* Spec ladder */
.qc-ladder { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; }
.qc-rung {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 0; border-top: 1px dotted rgba(20,17,13,0.20);
}
.qc-rung-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-on-light-3);
}
.qc-rung-v {
  font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 15px;
  color: var(--fg-on-light-1); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.qc-rung-v { display: inline-flex; align-items: baseline; gap: 3px; }
.qc-rung-v sub { font-family: var(--font-body); font-size: 12px; font-weight: 500; font-style: normal;
  vertical-align: baseline; letter-spacing: 0; text-transform: none; color: var(--fg-on-light-3); margin-left: 0; }
.qc-rung--price { border-top: 1px solid rgba(20,17,13,0.16); padding-top: 10px; }
.qc-rung--price .qc-rung-v { font-family: var(--font-body); font-style: normal; font-size: 18px; font-weight: 700; }
.qc-rung--price .qc-rung-v small { font-size: 11px; font-weight: 500; color: var(--fg-on-light-2); margin-left: 3px; }
.qc-rung--price .qc-rung-k small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; color: var(--fg-on-light-3); margin-top: 2px; }

/* Actions */
.qc-act { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.qc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: var(--radius-tight); cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  border: 1.5px solid var(--ink-900); background: transparent; color: var(--ink-900);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast);
}
.qc-btn svg { width: 14px; height: 14px; }
.qc-btn:hover { background: var(--ink-900); color: #fff; }
.qc-card.is-sel .qc-btn { background: var(--brass-500); border-color: var(--brass-500); color: #fff; }
.qc-card.is-sel .qc-btn .qc-btn-add { display: none; }
.qc-btn-sel { display: none; align-items: center; gap: 8px; }
.qc-card.is-sel .qc-btn .qc-btn-sel { display: inline-flex; }
.qc-link {
  align-self: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-on-light-3); display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--dur-fast);
}
.qc-link svg { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-out); }
.qc-link:hover { color: var(--brass-600); }
.qc-link:hover svg { transform: translateX(3px); }

/* ============================================================
   PROPOZYCJA B  (.qc-grid--toggle) — cała karta wybieralna
   ============================================================ */
.qc-grid--toggle .qc-card {
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  border: 1.5px solid rgba(20,17,13,0.10); border-radius: var(--radius-sm);
  background: #fff; padding: 10px; overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.qc-grid--toggle .qc-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.qc-grid--toggle .qc-card.is-sel {
  border-color: var(--brass-500); box-shadow: 0 0 0 1px var(--brass-500), var(--shadow-card);
}
.qc-grid--toggle .qc-img { border: none; background: var(--bone-100); border-radius: var(--radius-tight); }
.qc-grid--toggle .qc-img::before { opacity: 0.6; }

/* big circular selector top-right */
.qc-tick {
  position: absolute; top: 18px; right: 18px; z-index: 4;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1.5px solid rgba(20,17,13,0.25);
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(20,17,13,0.12);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.qc-tick svg { width: 16px; height: 16px; opacity: 0; transform: scale(0.5);
  transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.qc-grid--toggle .qc-card:hover .qc-tick { border-color: var(--brass-500); }
.qc-grid--toggle .qc-card.is-sel .qc-tick { background: var(--brass-500); border-color: var(--brass-500); }
.qc-grid--toggle .qc-card.is-sel .qc-tick svg { opacity: 1; transform: scale(1); }

.qc-grid--toggle .qc-body { padding: 14px 6px 6px; display: flex; flex-direction: column; gap: 7px; }
.qc-grid--toggle .qc-namerow { display: flex; flex-direction: column; gap: 3px; }

/* compact meta row: capacity · MOQ */
.qc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 2px 0 0;
}
.qc-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--fg-on-light-2); letter-spacing: 0.01em;
}
.qc-chip b { font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 14px; color: var(--fg-on-light-1); font-variant-numeric: tabular-nums; }
.qc-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,17,13,0.3); }

/* price block */
.qc-priceblock {
  margin-top: 12px; padding-top: 12px; border-top: 1px dotted rgba(20,17,13,0.2);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.qc-pb-l { display: flex; flex-direction: column; gap: 2px; }
.qc-pb-lbl { font-size: 9px; font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-on-light-3); }
.qc-pb-val { font-family: var(--font-body); font-weight: 700; color: var(--fg-on-light-1);
  font-variant-numeric: tabular-nums; }
.qc-pb-val .qc-pb-big { font-size: 22px; letter-spacing: -0.01em; }
.qc-pb-val .qc-pb-cur { font-size: 12px; font-weight: 600; color: var(--fg-on-light-2); margin-left: 3px; }
.qc-pb-note { font-size: 10px; font-weight: 500; color: var(--fg-on-light-3); margin-top: 1px; }
.qc-pb-see {
  font-size: 11px; font-weight: 600; color: var(--fg-on-light-3);
  display: inline-flex; align-items: center; gap: 5px; padding-bottom: 2px;
}
.qc-pb-see svg { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-out); }
.qc-grid--toggle .qc-card:hover .qc-pb-see { color: var(--brass-600); }
.qc-grid--toggle .qc-card:hover .qc-pb-see svg { transform: translateX(3px); }

/* ============================================================
   PASEK PODSUMOWANIA WYBORU (.qc-tray) — wspólny dla A i B
   ============================================================ */
.qc-tray {
  max-width: 1180px;
  margin: clamp(22px, 2.4vw, 32px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 18px 16px 22px;
  background: var(--ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  /* SZ10 — pasek wyboru dokleja się do dołu ekranu przy przeglądaniu modeli */
  position: sticky;
  bottom: clamp(12px, 2vw, 20px);
  z-index: 30;
}
.qc-tray.is-empty { background: rgba(20,17,13,0.04); box-shadow: none; border: 1px dashed rgba(20,17,13,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* SZ11 — „Wyczyść" (reset wyboru), widoczne tylko gdy coś zaznaczono */
.qc-tray-clear {
  display: none; background: none; border: none; cursor: pointer; padding: 6px 4px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--fg-on-dark-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.qc-tray.has-sel .qc-tray-clear { display: inline-flex; }
.qc-tray-clear:hover { color: #fff; }
.qc-tray-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qc-tray-count {
  flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-tight);
  display: grid; place-items: center;
  background: var(--brass-500); color: var(--ink-1000);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.qc-tray.is-empty .qc-tray-count { background: rgba(20,17,13,0.10); color: var(--fg-on-light-3); }
.qc-tray-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-tray-head {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em; color: var(--fg-on-dark-1); white-space: nowrap;
}
.qc-tray.is-empty .qc-tray-head { color: var(--fg-on-light-2); }
.qc-tray-names {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--fg-on-dark-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch;
}
.qc-tray-r { display: flex; align-items: center; gap: 20px; }
.qc-tray-note {
  text-align: right; max-width: 26ch; display: none;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500; line-height: 1.45;
  color: var(--fg-on-dark-3); text-wrap: pretty;
}
.qc-tray.has-sel .qc-tray-note { display: block; }
.qc-tray-cta {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 22px; border: none; cursor: pointer;
  border-radius: var(--radius-tight);
  background: var(--brass-500); color: #fff;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.qc-tray-cta svg { width: 14px; height: 14px; }
.qc-tray-cta:hover { background: var(--brass-400); transform: translateX(2px); }
.qc-tray-cta:disabled { background: rgba(20,17,13,0.12); color: var(--fg-on-light-3); cursor: not-allowed; transform: none; }
.qc-tray-hint { font-size: 11px; font-weight: 600; color: var(--fg-on-light-3); }

.qc-card.is-locked { opacity: 0.45; filter: saturate(0.85); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }

/* ── Karta jako powierzchnia konwersji (ADR-011 aneks A) — wspólne dla landingu i kategorii ── */
/* Zdjęcie i nazwa = linki do single-product (klik nawiguje; reszta karty zaznacza). */
.qc-imglink { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  position: relative; z-index: 1; text-decoration: none; }
.qc-titlelink { color: inherit; text-decoration: none; }
.qc-titlelink:hover { color: var(--brass-600); }
/* Sygnał „brandowalne" + etykieta — plakietki w prawym górnym rogu zdjęcia (qc-check jest w lewym). */
.qc-flag { position: absolute; top: 12px; right: 12px; z-index: 4;
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-tight);
  background: rgba(176,144,88,0.92); color: #fff; }
.qc-flag--badge { top: 38px; background: rgba(20,17,13,0.78); color: var(--fg-on-dark-2); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) { .qc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .qc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .qc-grid { grid-template-columns: 1fr; } }