/* Hotkix: komponenty bazowe do podglądów (design/*.html).
   Wzorzec dla implementacji w fazie 3, nie kod produkcyjny. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mk-off-white);
  color: var(--mk-charcoal);
  font: 400 16px/1.55 var(--mk-font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--mk-font-heading); font-weight: 800; margin: 0; }
/* Brandbook v1.1: nagłówki Saira Condensed Black Italic, wersaliki; podtytuły i ceny ExtraBold.
   h1[id] i .final__h[id] mają wyższą specyficzność niż klasy stron, więc tytuły stron zawsze dostają styl nagłówka. */
h1[id], h2.final__h[id] { font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--mk-charcoal); outline-offset: 2px; }

.container { width: 100%; max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-margin); }
.section { padding: var(--mk-section) 0; }
.section--white { background: var(--mk-white); }
.muted { color: var(--mk-text-2); }
.num { font-variant-numeric: tabular-nums; }

/* Typografia */
.t-display { font: italic 900 var(--mk-display)/0.92 var(--mk-font-heading); letter-spacing: 0; text-transform: uppercase; }
.t-h1 { font: italic 900 var(--mk-h1)/0.96 var(--mk-font-heading); letter-spacing: 0; text-transform: uppercase; }
.t-h2 { font: italic 900 var(--mk-h2)/1 var(--mk-font-heading); letter-spacing: 0; text-transform: uppercase; }
.t-h3 { font: 800 var(--mk-h3)/1.2 var(--mk-font-heading); letter-spacing: 0; }
.t-h4 { font: 800 var(--mk-h4)/1.3 var(--mk-font-heading); letter-spacing: 0; }
.t-lead { font-size: 18px; line-height: 1.55; }
.t-small { font-size: 14px; line-height: 1.45; }
.t-caption { font-size: 12.5px; line-height: 1.4; font-weight: 500; letter-spacing: 0.01em; }

/* Nagłówek ze „schodkiem”: pierwsza linia na 72% wysokości, druga pełna.
   Rytm z v1.0, zostaje jako akcent typograficzny. Tylko hero i tytuły kampanii. */
.step-head { font-family: var(--mk-font-heading); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0; line-height: 0.92; }
.step-head .s { display: block; font-size: calc(var(--mk-display) * 0.72); }
.step-head .b { display: block; font-size: var(--mk-display); }

/* Sygnał: turkusowa belka 3px (Volt). Oznacza stan aktywny/ważny, nigdy dekorację. */
.signal { display: inline-block; width: 24px; height: 3px; background: var(--mk-red); }

/* Przyciski */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: 500 15px/1 var(--mk-font-body);
  border-radius: var(--mk-radius-control); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--mk-fast) var(--mk-ease), color var(--mk-fast) var(--mk-ease), border-color var(--mk-fast) var(--mk-ease);
}
.btn--primary { background: var(--mk-volt); color: var(--mk-on-accent); font-weight: 600; }
.btn--primary:hover { background: var(--mk-deep); }
.btn--secondary { background: transparent; color: var(--mk-charcoal); border-color: var(--mk-charcoal); }
.btn--secondary:hover { background: var(--mk-charcoal); color: #fff; }
.btn--dark { background: var(--mk-charcoal); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn[disabled] { background: var(--mk-light-grey); color: var(--mk-text-2); border-color: var(--mk-border); cursor: not-allowed; }
.link { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link:hover { text-decoration-color: var(--mk-link-underline); }

/* Pola */
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.input {
  min-height: 48px; padding: 0 14px; width: 100%;
  font: 400 16px var(--mk-font-body); color: var(--mk-charcoal);
  background: var(--mk-white); border: 1px solid var(--mk-border-control); border-radius: var(--mk-radius-control);
}
.input:hover { border-color: var(--mk-charcoal); }
.field--error .input { border-color: var(--mk-error); border-width: 1.5px; }
.field .hint { font-size: 13px; color: var(--mk-text-2); }
.field--error .hint { color: var(--mk-error); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--mk-border-control); border-radius: var(--mk-radius-control); background: #fff; }
.qty button { width: 44px; height: 46px; border: 0; background: none; font: 500 18px var(--mk-font-body); color: var(--mk-charcoal); cursor: pointer; }
.qty span { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }

.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--mk-border-control); font-size: 14px; background: #fff; }
.chip[aria-pressed="true"] { background: var(--mk-charcoal); border-color: var(--mk-charcoal); color: #fff; }

/* Status dostępności: kształt + tekst, bez dodatkowych kolorów */
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--mk-charcoal); }
.stock--in::before { background: var(--mk-charcoal); }
.stock--low::before { background: linear-gradient(90deg, var(--mk-charcoal) 50%, transparent 50%); }

/* Zaślepki. Celowo wyglądają inaczej niż prawdziwa treść. */
.ph-img {
  position: relative; background: var(--mk-light-grey); border: 1px solid var(--mk-border);
  display: flex; align-items: flex-end; padding: 14px; overflow: hidden;
}
.ph-img::before { content: ""; position: absolute; inset: 12px; border: 1px dashed var(--mk-silver); pointer-events: none; }
.ph-img span { position: relative; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--mk-text-2); max-width: 34ch; background: var(--mk-light-grey); padding: 2px 4px; }
.ph-img--43 { aspect-ratio: 4 / 3; }
.ph-img--11 { aspect-ratio: 1 / 1; }
.ph-img--169 { aspect-ratio: 16 / 9; }
.ph-img--45 { aspect-ratio: 4 / 5; }
.ph-data {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px;
  border: 1px dashed var(--mk-border-control); border-radius: 4px;
  font: 500 13px/1.6 var(--mk-font-body); color: var(--mk-text-2); background: var(--mk-light-grey);
}
.ph-data::before { content: "Zaślepka:"; color: var(--mk-charcoal); }

/* Karta produktu: bez ramek i cieni, zdjęcie prowadzi */
.pcard { display: grid; gap: 14px; text-decoration: none; }
.pcard__media { transition: opacity var(--mk-base) var(--mk-ease); }
.pcard:hover .pcard__media { opacity: 0.92; }
.pcard__name { font: 800 19px/1.3 var(--mk-font-heading); letter-spacing: 0; }
.pcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pcard:hover .pcard__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Tabela specyfikacji */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--mk-border); vertical-align: baseline; }
.spec th { font-weight: 400; color: var(--mk-text-2); width: 46%; font-size: 15px; }
.spec td { font: 800 16px var(--mk-font-heading); font-variant-numeric: tabular-nums; }

/* Akordeon (FAQ) */
.acc { border-top: 1px solid var(--mk-border); }
.acc details { border-bottom: 1px solid var(--mk-border); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; min-height: 44px; font: 800 18px/1.35 var(--mk-font-heading); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-4px); transition: transform var(--mk-base) var(--mk-ease); }
.acc details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.acc .acc__body { padding: 0 0 22px; max-width: 68ch; color: var(--mk-text-2); }

/* Ikony liniowe 1.5px */
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--mk-radius-control); position: relative; }
.icon-btn:hover { background: var(--mk-light-grey); }
.badge-count { position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--mk-volt); color: var(--mk-on-accent); font: 600 11px/17px var(--mk-font-body); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}