/* ============================================================
   RACEPARTS.PL — UI KIT  (ETAP 2)
   Komponenty. Konsumują WYŁĄCZNIE tokeny z tokens.css.
   Zero hardcoded wartości. Estetyka: Premium Tech / Engineering.
   ============================================================ */

/* ── Reset minimalny (warsztatowy; w motywie reset robi design-system.css) */
*,*::before,*::after{box-sizing:border-box}

/* ============================================================
   01 · BUTTONS
   ============================================================ */
.rp-btn{
  --_pad-y:var(--rp-space-4);
  --_pad-x:var(--rp-space-8);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--rp-space-2);
  font-family:var(--rp-font-sans);font-weight:var(--rp-w-bold);font-size:var(--rp-text-sm);
  line-height:1;text-transform:uppercase;letter-spacing:var(--rp-track-wide);text-decoration:none;
  padding:var(--_pad-y) var(--_pad-x);
  border:1px solid transparent;border-radius:var(--rp-radius-md);
  cursor:pointer;white-space:nowrap;user-select:none;
  transition:background var(--rp-dur) var(--rp-ease),
             border-color var(--rp-dur) var(--rp-ease),
             color var(--rp-dur) var(--rp-ease),
             transform var(--rp-dur) var(--rp-ease),
             box-shadow var(--rp-dur) var(--rp-ease);
}
.rp-btn:focus-visible{outline:2px solid var(--rp-red-400);outline-offset:2px}
.rp-btn:disabled,.rp-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.rp-btn .rp-btn__icon{width:1em;height:1em;flex:0 0 auto}

/* primary — czerwień + glow */
.rp-btn--primary{background:var(--rp-red-500);color:var(--rp-text-on-accent);box-shadow:var(--rp-glow-accent)}
.rp-btn--primary:hover{background:var(--rp-red-400);transform:translateY(-1px)}
.rp-btn--primary:active{background:var(--rp-red-600);transform:translateY(0)}

/* ghost — outline */
.rp-btn--ghost{background:transparent;color:var(--rp-text);border-color:var(--rp-border-strong)}
.rp-btn--ghost:hover{border-color:var(--rp-red-500);color:var(--rp-text)}
.rp-btn--ghost:active{background:var(--rp-red-dim)}

/* text — link-button */
.rp-btn--text{background:transparent;color:var(--rp-text-secondary);padding-inline:var(--rp-space-2);letter-spacing:var(--rp-track-wide)}
.rp-btn--text:hover{color:var(--rp-red-500)}

/* rozmiary */
.rp-btn--sm{--_pad-y:var(--rp-space-3);--_pad-x:var(--rp-space-5);font-size:var(--rp-text-xs)}
.rp-btn--lg{--_pad-y:var(--rp-space-5);--_pad-x:var(--rp-space-10);font-size:var(--rp-text-base)}
.rp-btn--block{display:flex;width:100%}

/* ============================================================
   02 · FORMS
   ============================================================ */
.rp-field{display:flex;flex-direction:column;gap:var(--rp-space-2)}
.rp-label{
  font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);font-weight:var(--rp-w-medium);
  letter-spacing:var(--rp-track-wide);text-transform:uppercase;color:var(--rp-text-muted);
}
.rp-label .rp-req{color:var(--rp-red-500)}

.rp-input,.rp-select,.rp-textarea{
  font-family:var(--rp-font-sans);font-size:var(--rp-text-base);color:var(--rp-text);
  background:var(--rp-surface-2);border:1px solid var(--rp-border);border-radius:var(--rp-radius-md);
  padding:var(--rp-space-3) var(--rp-space-4);width:100%;
  transition:border-color var(--rp-dur) var(--rp-ease),box-shadow var(--rp-dur) var(--rp-ease),background var(--rp-dur) var(--rp-ease);
}
.rp-textarea{min-height:120px;resize:vertical;line-height:var(--rp-leading-normal)}
.rp-input::placeholder,.rp-textarea::placeholder{color:var(--rp-text-muted)}
.rp-input:hover,.rp-select:hover,.rp-textarea:hover{border-color:var(--rp-border-strong)}
.rp-input:focus,.rp-select:focus,.rp-textarea:focus{
  outline:none;border-color:var(--rp-red-500);
  box-shadow:0 0 0 3px var(--rp-red-dim);background:var(--rp-surface-1);
}
.rp-input:disabled,.rp-select:disabled,.rp-textarea:disabled{opacity:.5;cursor:not-allowed}

/* select — własna strzałka */
.rp-select{
  appearance:none;cursor:pointer;padding-right:var(--rp-space-10);
  background-image:linear-gradient(45deg,transparent 50%,var(--rp-text-muted) 50%),
                   linear-gradient(135deg,var(--rp-text-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

/* walidacja */
.rp-field.is-error .rp-input,.rp-field.is-error .rp-select,.rp-field.is-error .rp-textarea{border-color:var(--rp-danger)}
.rp-field.is-error .rp-input:focus{box-shadow:0 0 0 3px rgba(255,77,79,.15)}
.rp-field.is-success .rp-input{border-color:var(--rp-success)}
.rp-help{font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);color:var(--rp-text-muted)}
.rp-field.is-error .rp-help{color:var(--rp-danger)}

/* checkbox / radio */
.rp-check{display:inline-flex;align-items:center;gap:var(--rp-space-3);cursor:pointer;font-size:var(--rp-text-sm);color:var(--rp-text-secondary);user-select:none}
.rp-check input{position:absolute;opacity:0;width:0;height:0}
.rp-check__box{
  width:18px;height:18px;flex:0 0 auto;background:var(--rp-surface-2);
  border:1px solid var(--rp-border-strong);border-radius:var(--rp-radius-xs);
  display:grid;place-items:center;transition:all var(--rp-dur) var(--rp-ease);
}
.rp-check--radio .rp-check__box{border-radius:var(--rp-radius-pill)}
.rp-check__box::after{content:"";width:10px;height:10px;transform:scale(0);transition:transform var(--rp-dur) var(--rp-ease-out)}
.rp-check--radio .rp-check__box::after{border-radius:var(--rp-radius-pill);background:var(--rp-text-on-accent)}
.rp-check input:checked + .rp-check__box{background:var(--rp-red-500);border-color:var(--rp-red-500)}
.rp-check input:checked + .rp-check__box::after{transform:scale(1)}
.rp-check--radio input:checked + .rp-check__box::after{width:8px;height:8px}
.rp-check:not(.rp-check--radio) input:checked + .rp-check__box::after{
  width:5px;height:9px;border:solid var(--rp-text-on-accent);border-width:0 2px 2px 0;
  transform:scale(1) rotate(45deg);margin-top:-2px;background:transparent;border-radius:0;
}
.rp-check input:focus-visible + .rp-check__box{outline:2px solid var(--rp-red-400);outline-offset:2px}

/* qty stepper */
.rp-qty{display:inline-flex;align-items:stretch;border:1px solid var(--rp-border-strong);border-radius:var(--rp-radius-md);overflow:hidden;background:var(--rp-surface-2)}
.rp-qty button{
  width:40px;background:transparent;border:0;color:var(--rp-text-secondary);
  font-size:var(--rp-text-lg);cursor:pointer;transition:background var(--rp-dur) var(--rp-ease),color var(--rp-dur) var(--rp-ease);
}
.rp-qty button:hover{background:var(--rp-surface-3);color:var(--rp-red-500)}
.rp-qty input{
  width:48px;text-align:center;background:transparent;border:0;color:var(--rp-text);
  font-family:var(--rp-font-mono);font-size:var(--rp-text-base);
  border-inline:1px solid var(--rp-border);-moz-appearance:textfield;
}
.rp-qty input::-webkit-outer-spin-button,.rp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ============================================================
   03 · BADGES / TAGS
   ============================================================ */
.rp-badge{
  display:inline-flex;align-items:center;gap:var(--rp-space-2);
  font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);font-weight:var(--rp-w-medium);
  letter-spacing:var(--rp-track-wide);text-transform:uppercase;
  padding:var(--rp-space-1) var(--rp-space-3);border-radius:var(--rp-radius-sm);
  border:1px solid transparent;line-height:1.4;
}
.rp-badge__dot{width:6px;height:6px;border-radius:var(--rp-radius-pill);background:currentColor}
/* mono-akcent: „w magazynie" neutralny (zielony łamałby jednoakcentowość brandu) */
.rp-badge--stock{color:var(--rp-text-secondary);background:rgba(255,255,255,.05);border-color:var(--rp-border-strong)}
.rp-badge--stock .rp-badge__dot{background:var(--rp-success)} /* tylko kropka sygnalizuje dostępność */
.rp-badge--low{color:var(--rp-text-secondary);background:rgba(255,255,255,.05);border-color:var(--rp-border-strong)}
.rp-badge--low .rp-badge__dot{background:var(--rp-red-400)}
.rp-badge--out{color:var(--rp-red-400);background:rgba(209,46,39,.10);border-color:rgba(209,46,39,.30)}
.rp-badge--sale{color:var(--rp-text-on-accent);background:var(--rp-red-500);font-weight:var(--rp-w-bold)}
.rp-badge--fit{color:var(--rp-text-secondary);background:transparent;border-color:var(--rp-border-strong)}

/* ============================================================
   04 · SPEC TABLE (CNC) + DATA TABLE
   ============================================================ */
.rp-spec{border:1px solid var(--rp-border);border-radius:var(--rp-radius-md);background:var(--rp-surface-1);overflow:hidden}
.rp-spec__head{
  padding:var(--rp-space-3) var(--rp-space-4);background:var(--rp-inset);border-bottom:1px solid var(--rp-border);
  font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);letter-spacing:var(--rp-track-wide);
  text-transform:uppercase;color:var(--rp-text-muted);
}
.rp-spec table{width:100%;border-collapse:collapse;font-family:var(--rp-font-mono);font-size:var(--rp-text-sm)}
.rp-spec td{padding:var(--rp-space-3) var(--rp-space-4);border-bottom:1px solid var(--rp-border)}
.rp-spec tr:last-child td{border-bottom:0}
.rp-spec tr:nth-child(even){background:rgba(255,255,255,.012)}
.rp-spec td:first-child{color:var(--rp-text-muted);width:42%}
.rp-spec td:last-child{color:var(--rp-text);text-align:right}
.rp-spec .rp-ok{color:var(--rp-success)}

/* tabela koszyka */
.rp-table{width:100%;border-collapse:collapse;font-size:var(--rp-text-sm)}
.rp-table thead th{
  text-align:left;padding:var(--rp-space-3) var(--rp-space-4);border-bottom:1px solid var(--rp-border-strong);
  font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);letter-spacing:var(--rp-track-wide);
  text-transform:uppercase;color:var(--rp-text-muted);font-weight:var(--rp-w-medium);
}
.rp-table tbody td{padding:var(--rp-space-4);border-bottom:1px solid var(--rp-border);color:var(--rp-text-secondary)}
.rp-table tbody td:last-child,.rp-table thead th:last-child{text-align:right}
.rp-table .rp-cell-strong{color:var(--rp-text);font-weight:var(--rp-w-semibold)}
.rp-table .rp-cell-price{font-family:var(--rp-font-mono);color:var(--rp-text)}

/* ============================================================
   05 · CARDS
   ============================================================ */
.rp-card{
  background:var(--rp-surface-1);border:1px solid var(--rp-border);border-radius:var(--rp-radius-md);
  padding:var(--rp-space-6);
}
.rp-card--inset{background:var(--rp-inset)}

/* product card */
.rp-product{
  display:flex;flex-direction:column;background:var(--rp-surface-1);
  border:1px solid var(--rp-border);border-radius:var(--rp-radius-md);overflow:hidden;
  transition:border-color var(--rp-dur) var(--rp-ease),transform var(--rp-dur) var(--rp-ease),box-shadow var(--rp-dur) var(--rp-ease);
}
.rp-product:hover{border-color:var(--rp-border-strong);transform:translateY(-2px);box-shadow:var(--rp-shadow-md)}
.rp-product__media{
  position:relative;aspect-ratio:1/1;background:var(--rp-inset);
  display:grid;place-items:center;border-bottom:1px solid var(--rp-border);overflow:hidden;
}
.rp-product__media img{width:100%;height:100%;object-fit:cover}
.rp-product__media .rp-product__ph{font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);color:var(--rp-text-muted);letter-spacing:var(--rp-track-wide)}
.rp-product__tags{position:absolute;top:var(--rp-space-3);left:var(--rp-space-3);display:flex;flex-direction:column;gap:var(--rp-space-2);align-items:flex-start}
.rp-product__body{padding:var(--rp-space-4);display:flex;flex-direction:column;gap:var(--rp-space-2);flex:1}
.rp-product__sku{font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);color:var(--rp-text-muted);letter-spacing:var(--rp-track-wide)}
.rp-product__title{font-weight:var(--rp-w-semibold);font-size:var(--rp-text-base);line-height:var(--rp-leading-snug);color:var(--rp-text)}
.rp-product__title a{color:inherit;text-decoration:none}
.rp-product__title a:hover{color:var(--rp-red-500)}
.rp-product__fit{display:flex;flex-wrap:wrap;gap:var(--rp-space-1)}
.rp-product__foot{margin-top:auto;padding:var(--rp-space-4);border-top:1px solid var(--rp-border);display:flex;align-items:center;justify-content:space-between;gap:var(--rp-space-3)}
.rp-product__price{font-family:var(--rp-font-mono);font-weight:var(--rp-w-bold);font-size:var(--rp-text-lg);color:var(--rp-text)}
.rp-product__price small{font-size:var(--rp-text-xs);color:var(--rp-text-muted);font-weight:var(--rp-w-regular)}

/* ============================================================
   06 · NAVIGATION (header / breadcrumbs / footer)
   ============================================================ */
.rp-header{
  position:sticky;top:0;z-index:50;background:rgba(10,11,12,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rp-border);
}
.rp-header__bar{
  max-width:var(--rp-container);margin-inline:auto;padding-inline:var(--rp-gutter);
  height:64px;display:flex;align-items:center;gap:var(--rp-space-8);
}
.rp-logo{display:inline-flex;align-items:center;gap:var(--rp-space-3);text-decoration:none;color:var(--rp-text)}
/* Logo = wariant „Outline / White" — kontur pędzlowy + wordmark, oba w currentColor.
   currentColor pozwala sterować barwą jednym `color` (np. inwersja na jasnym tle). */
.rp-logo__svg{height:72px;width:auto;display:block;color:var(--rp-text);transition:color var(--rp-dur) var(--rp-ease)}
/* fallback tekstowy gdy SVG niedostępne (np. brak inline-SVG w mailu) */
.rp-logo__mark{
  font-family:var(--rp-font-sans);font-weight:var(--rp-w-black);font-style:italic;font-size:var(--rp-text-xl);
  letter-spacing:var(--rp-track-tight);text-transform:uppercase;color:var(--rp-text);
}
.rp-nav{display:flex;gap:var(--rp-space-6);margin-right:auto}
.rp-nav a{
  font-family:var(--rp-font-sans);font-weight:var(--rp-w-semibold);font-size:var(--rp-text-sm);
  text-transform:uppercase;letter-spacing:var(--rp-track-wide);color:var(--rp-text-secondary);text-decoration:none;
  position:relative;padding-block:var(--rp-space-2);transition:color var(--rp-dur) var(--rp-ease);
}
.rp-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--rp-red-500);transition:width var(--rp-dur) var(--rp-ease)}
.rp-nav a:hover{color:var(--rp-text)}
.rp-nav a:hover::after,.rp-nav a.is-active::after{width:100%}
.rp-nav a.is-active{color:var(--rp-text)}
.rp-header__actions{display:flex;align-items:center;gap:var(--rp-space-4)}
.rp-iconbtn{
  width:40px;height:40px;display:grid;place-items:center;background:transparent;border:1px solid var(--rp-border);
  border-radius:var(--rp-radius-md);color:var(--rp-text-secondary);cursor:pointer;position:relative;
  transition:border-color var(--rp-dur) var(--rp-ease),color var(--rp-dur) var(--rp-ease);
}
.rp-iconbtn:hover{border-color:var(--rp-red-500);color:var(--rp-text)}
.rp-iconbtn__count{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  background:var(--rp-red-500);color:#fff;border-radius:var(--rp-radius-pill);
  font-family:var(--rp-font-mono);font-size:10px;font-weight:var(--rp-w-bold);display:grid;place-items:center;
}

.rp-breadcrumbs{display:flex;align-items:center;gap:var(--rp-space-2);font-family:var(--rp-font-mono);font-size:var(--rp-text-xs);color:var(--rp-text-muted);letter-spacing:var(--rp-track-wide)}
.rp-breadcrumbs a{color:var(--rp-text-secondary);text-decoration:none}
.rp-breadcrumbs a:hover{color:var(--rp-red-500)}
.rp-breadcrumbs .sep{color:var(--rp-text-muted);opacity:.6}

.rp-footer{border-top:1px solid var(--rp-border);background:var(--rp-inset);color:var(--rp-text-muted)}
.rp-footer__bar{max-width:var(--rp-container);margin-inline:auto;padding:var(--rp-space-8) var(--rp-gutter);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--rp-space-4);font-family:var(--rp-font-mono);font-size:var(--rp-text-xs)}
.rp-footer a{color:var(--rp-text-secondary);text-decoration:none}
.rp-footer a:hover{color:var(--rp-red-500)}

/* ============================================================
   07 · NOTICES / ALERTS  (override woocommerce-* w fazie migracji)
   ============================================================ */
.rp-notice{
  display:flex;align-items:flex-start;gap:var(--rp-space-3);
  padding:var(--rp-space-4) var(--rp-space-5);border-radius:var(--rp-radius-md);
  border:1px solid var(--rp-border);border-left-width:3px;background:var(--rp-surface-1);
  font-size:var(--rp-text-sm);color:var(--rp-text-secondary);
}
.rp-notice__title{color:var(--rp-text);font-weight:var(--rp-w-semibold)}
.rp-notice--success{border-left-color:var(--rp-success)}
.rp-notice--info{border-left-color:var(--rp-info)}
.rp-notice--error{border-left-color:var(--rp-danger)}
.rp-notice__icon{flex:0 0 auto;margin-top:2px}
.rp-notice--success .rp-notice__icon{color:var(--rp-success)}
.rp-notice--info .rp-notice__icon{color:var(--rp-info)}
.rp-notice--error .rp-notice__icon{color:var(--rp-danger)}