/* ============================================================
   RACEPARTS.PL — PRODUCT DETAIL PAGE (PDP)
   Visual target: design/view-pdp.html (Etap 3, zatwierdzony)
   Architektura klas zgodna z single-product.php + pdp.js
   (WC zachowuje natywny formularz add-to-cart / warianty / AJAX)
   ============================================================ */

/* ── PDP Layout ───────────────────────────────────────────── */
.single-product .site-main {
  padding-block: var(--rp-space-10) var(--rp-space-16);
}

.rp-pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--rp-space-12);
  align-items: start;
  max-width: var(--rp-container);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
}

@media (max-width: 900px) {
  .rp-pdp { grid-template-columns: 1fr; gap: var(--rp-space-8); }
}

/* ── Gallery ──────────────────────────────────────────────── */
.rp-gallery {
  position: sticky;
  top: calc(70px + var(--rp-space-6)); /* below sticky header */
}

.rp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--rp-inset);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-md);
  overflow: hidden;
  cursor: zoom-in;
  display: grid;
  place-items: center;
}

.rp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--rp-space-6);
  transition: transform var(--rp-dur-slow, 280ms) var(--rp-ease);
}

/* "Placeholder" state — before photos are uploaded */
.rp-gallery__main--placeholder {
  flex-direction: column;
  gap: var(--rp-space-3);
  color: var(--rp-text-muted);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-sm);
  letter-spacing: var(--rp-track-wide);
  cursor: default;
}
.rp-gallery__main--placeholder svg { width: 64px; height: 64px; opacity: 0.25; }

/* zoom hint badge */
.rp-gallery__zoom {
  position: absolute;
  bottom: var(--rp-space-3);
  right: var(--rp-space-3);
  display: flex;
  gap: var(--rp-space-2);
  align-items: center;
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  color: var(--rp-text-muted);
  background: rgba(10,11,12,0.6);
  padding: 6px 10px;
  border-radius: var(--rp-radius-sm);
  border: 1px solid var(--rp-border);
}
.rp-gallery__zoom svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* Material / sale badge overlaid on gallery (top-left) */
.rp-gallery__material-badge {
  position: absolute;
  top: var(--rp-space-4);
  left: var(--rp-space-4);
  z-index: 2;
  background: rgba(10,11,12,0.85);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-sm);
  padding: var(--rp-space-2) var(--rp-space-3);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  font-weight: 700;
  letter-spacing: var(--rp-track-wide);
  text-transform: uppercase;
  color: var(--rp-red-400);
  backdrop-filter: blur(8px);
}

/* Thumbnail strip */
.rp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--rp-space-3);
  margin-top: var(--rp-space-3);
}

.rp-gallery__thumb {
  aspect-ratio: 1 / 1;
  background: var(--rp-surface-1);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-sm);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--rp-dur) var(--rp-ease);
}
.rp-gallery__thumb:hover { border-color: var(--rp-border-strong); }
.rp-gallery__thumb.is-active { border-color: var(--rp-red-500); }
.rp-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* ── Product Info Column ──────────────────────────────────── */
.rp-product-info {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-5);
  align-self: start;
}

/* Breadcrumb */
.rp-product-info .woocommerce-breadcrumb {
  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-info .woocommerce-breadcrumb a { color: var(--rp-text-muted); }
.rp-product-info .woocommerce-breadcrumb a:hover { color: var(--rp-red-500); }

/* Eyebrow — category line (mono, muted) */
.rp-pdp-eyebrow,
.rp-product-category-tag {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  letter-spacing: var(--rp-track-wider);
  text-transform: uppercase;
  color: var(--rp-text-muted);
}
.rp-pdp-eyebrow a, .rp-product-category-tag a { color: inherit; }
.rp-pdp-eyebrow a:hover, .rp-product-category-tag a:hover { color: var(--rp-red-500); }

/* Product title */
/* Tytuł produktu — sentence case + responsywny rozmiar, by długie nazwy
   nie wypychały CTA poza fold (DfH: hierarchia wizualna, CTA widoczne) */
.rp-product-info .product_title {
  font-weight: var(--rp-w-extra);
  font-size: clamp(var(--rp-text-xl), 2.6vw, var(--rp-text-3xl)) !important;
  line-height: var(--rp-leading-tight);
  letter-spacing: var(--rp-track-tight);
  text-transform: none !important;
  margin: 0;
}

/* Meta row: rating · SKU · EAN (mono) */
.rp-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-space-2) var(--rp-space-5);
  align-items: center;
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  color: var(--rp-text-muted);
}
.rp-pdp-meta__rating { color: var(--rp-red-500); letter-spacing: 1px; }
.rp-pdp-meta__rating span { color: var(--rp-text-secondary); margin-left: var(--rp-space-2); }

/* Price row */
.rp-product-info .price {
  display: flex;
  align-items: baseline;
  gap: var(--rp-space-4);
  padding-block: var(--rp-space-4);
  border-block: 1px solid var(--rp-border);
  font-family: var(--rp-font-mono);
  font-weight: var(--rp-w-bold);
  font-size: var(--rp-text-3xl);
  color: var(--rp-text);
}
.rp-product-info .price ins { text-decoration: none; color: var(--rp-text); }
.rp-product-info .price del {
  color: var(--rp-text-muted);
  font-size: var(--rp-text-xl);
  margin-right: var(--rp-space-2);
}
.rp-pdp-price-sub {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  color: var(--rp-text-muted);
  line-height: var(--rp-leading-snug, 1.35);
}

/* Stock badge wrapper */
.rp-pdp-stock { align-self: flex-start; }

/* Fit / compatibility block */
.rp-pdp-fit-block {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-2);
}
.rp-pdp-fit-label {
  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-pdp-fit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-space-2);
}

/* Lede / short description */
.rp-product-info .woocommerce-product-details__short-description,
.rp-pdp-lede {
  color: var(--rp-text-secondary);
  font-size: var(--rp-text-base);
  line-height: var(--rp-leading-relaxed, 1.7);
}

/* ── CNC Spec Summary (compact key specs, optional) ───────── */
.rp-spec-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--rp-space-2);
  padding: var(--rp-space-4);
  background: var(--rp-surface-1);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-md);
}
.rp-spec-summary__item {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-1);
  padding: var(--rp-space-3);
  border-radius: var(--rp-radius-sm);
  transition: background var(--rp-dur) var(--rp-ease);
}
.rp-spec-summary__item:hover { background: var(--rp-surface-2); }
.rp-spec-summary__label {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  color: var(--rp-text-muted);
  letter-spacing: var(--rp-track-wide);
  text-transform: uppercase;
}
.rp-spec-summary__value {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-lg);
  font-weight: var(--rp-w-bold);
  color: var(--rp-text);
}
.rp-spec-summary__value--highlight { color: var(--rp-red-500); }

/* ── Add to Cart area ─────────────────────────────────────── */
.rp-atc-area { display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-atc-area form.cart {
  display: flex;
  gap: var(--rp-space-3);
  align-items: stretch;
  margin: 0;
}
.rp-atc-area .quantity { flex-shrink: 0; }
.rp-atc-area .single_add_to_cart_button {
  flex: 1;
  padding: 0.9em 2em !important;
  font-size: var(--rp-text-base) !important;
  letter-spacing: var(--rp-track-wide);
}

/* ── Trust checks (✓ rows) ────────────────────────────────── */
.rp-trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rp-space-3);
  margin-top: var(--rp-space-2);
}
.rp-trust-badge {
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  font-size: var(--rp-text-sm);
  color: var(--rp-text-secondary);
}
.rp-trust-badge svg { width: 18px; height: 18px; color: var(--rp-success); flex: 0 0 auto; stroke: currentColor; stroke-width: 1.6; fill: none; }

@media (max-width: 480px) {
  .rp-trust-badges { grid-template-columns: 1fr; }
}

/* ── Sticky ATC bar ───────────────────────────────────────── */
.rp-sticky-atc {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(10,11,12,0.9);
  border-top: 1px solid var(--rp-border);
  backdrop-filter: blur(12px);
  padding: var(--rp-space-3) var(--rp-gutter);
  transform: translateY(100%);
  transition: transform 280ms var(--rp-ease);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.rp-sticky-atc.is-visible { transform: translateY(0); }
.rp-sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: var(--rp-space-5);
  max-width: var(--rp-container);
  margin-inline: auto;
}
.rp-sticky-atc__product {
  display: flex;
  align-items: center;
  gap: var(--rp-space-4);
  flex: 1;
  min-width: 0;
}
.rp-sticky-atc__thumb {
  width: 44px; height: 44px;
  border-radius: var(--rp-radius-sm);
  object-fit: contain;
  background: var(--rp-surface-2);
  padding: 4px;
  flex-shrink: 0;
}
.rp-sticky-atc__name {
  font-weight: var(--rp-w-semibold);
  font-size: var(--rp-text-sm);
  color: var(--rp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-sticky-atc__price {
  font-family: var(--rp-font-mono);
  font-weight: var(--rp-w-bold);
  font-size: var(--rp-text-lg);
  color: var(--rp-text);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.rp-sticky-atc__btn { padding: 0.7em 1.6em !important; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 560px) {
  .rp-sticky-atc__product { display: none; }
  .rp-sticky-atc__btn { flex: 1; }
}

/* ── Product Tabs / Spec Table section ────────────────────── */
.rp-pdp-lower {
  max-width: var(--rp-container);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
  padding-block: var(--rp-space-12);
  border-top: 1px solid var(--rp-border);
}

/* Tab navigation */
.rp-tabs-nav {
  display: flex;
  gap: var(--rp-space-1);
  border-bottom: 1px solid var(--rp-border);
  margin-bottom: var(--rp-space-8);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.rp-tabs-nav::-webkit-scrollbar { display: none; }
.rp-tab-btn {
  padding: var(--rp-space-3) var(--rp-space-5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--rp-text-muted);
  font-family: var(--rp-font-sans);
  font-size: var(--rp-text-sm);
  font-weight: var(--rp-w-semibold);
  letter-spacing: var(--rp-track-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--rp-dur) var(--rp-ease), border-color var(--rp-dur) var(--rp-ease);
  white-space: nowrap;
  margin-bottom: -1px;
}
.rp-tab-btn:hover { color: var(--rp-text-secondary); }
.rp-tab-btn.is-active { color: var(--rp-text); border-bottom-color: var(--rp-red-500); }

.rp-tab-panel { display: none; max-width: 80ch; }
.rp-tab-panel.is-active { display: block; }
.rp-tab-panel p { color: var(--rp-text-secondary); margin-bottom: var(--rp-space-4); }
.rp-tab-panel h2, .rp-tab-panel h3 {
  color: var(--rp-text);
  margin-block: var(--rp-space-6) var(--rp-space-3);
  text-transform: uppercase;
  letter-spacing: var(--rp-track-wide);
}

/* ── Full CNC Spec Table (mono) ───────────────────────────── */
.rp-spec-table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-sm);
}
.rp-spec-table caption {
  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);
  text-align: left;
  padding-bottom: var(--rp-space-4);
}
.rp-spec-table tr { border-bottom: 1px solid var(--rp-border); }
.rp-spec-table tbody tr:nth-child(even) { background: var(--rp-surface-1); }
.rp-spec-table th {
  width: 200px;
  min-width: 140px;
  padding: var(--rp-space-3) var(--rp-space-4) var(--rp-space-3) var(--rp-space-3);
  color: var(--rp-text-muted);
  font-weight: var(--rp-w-medium, 500);
  text-align: left;
  vertical-align: top;
}
.rp-spec-table td {
  padding: var(--rp-space-3) var(--rp-space-3);
  color: var(--rp-text);
  vertical-align: top;
}
.rp-spec-table .rp-spec-value--material { color: var(--rp-red-500); font-weight: var(--rp-w-bold); }

/* OE number list */
.rp-oe-list { display: flex; flex-wrap: wrap; gap: var(--rp-space-2); }
.rp-oe-number {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-text-xs);
  padding: 0.2em 0.6em;
  background: var(--rp-surface-2);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-sm);
  color: var(--rp-text-secondary);
  letter-spacing: var(--rp-track-wide);
}

/* ── Section head (rule line) ─────────────────────────────── */
.rp-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--rp-space-4);
  margin-bottom: var(--rp-space-8);
}
.rp-section-head h2 {
  font-weight: var(--rp-w-extra);
  font-size: var(--rp-text-2xl);
  text-transform: uppercase;
  letter-spacing: var(--rp-track-wide);
}
.rp-section-head .rule { flex: 1; height: 1px; background: var(--rp-border); }

/* ── Related products ─────────────────────────────────────── */
.rp-related {
  max-width: var(--rp-container);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
  padding-block: var(--rp-space-12);
  border-top: 1px solid var(--rp-border);
}
.rp-related h2 {
  font-weight: var(--rp-w-extra);
  font-size: var(--rp-text-2xl);
  text-transform: uppercase;
  letter-spacing: var(--rp-track-wide);
  margin-bottom: var(--rp-space-8);
}
.rp-related .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rp-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .rp-related .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rp-related .products { grid-template-columns: 1fr; } }

/* ── FIX: Related product cards — shop.css not loaded on PDP ─────────
   li.rp-product card CSS lives in shop.css (not enqueued on is_product).
   Duplicate only the critical rules needed for the related section.     */
.rp-related li.rp-product {
  background: var(--rp-bg-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--rp-transition), transform var(--rp-transition);
}
.rp-related li.rp-product:hover {
  border-color: var(--rp-red-500);
  transform: translateY(-2px);
}
.rp-related li.rp-product .rp-product__foot {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--rp-space-2);
  padding: var(--rp-space-3) var(--rp-space-4) var(--rp-space-4);
  border-top: 1px solid var(--rp-border);
  margin-top: auto;
}
/* Specificity 0,4,0 — beats design-system's li.product{padding:16px!important} (0,3,0) */
.woocommerce .rp-related ul.products li.rp-product { padding: 0 !important; }

.rp-related li.rp-product .add_to_cart_button,
.rp-related li.rp-product .button {
  display: block !important;
  /* stretch button to card edges (compensate foot padding) */
  width: calc(100% + 2 * var(--rp-space-4)) !important;
  margin-inline: calc(-1 * var(--rp-space-4)) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}
.rp-related li.rp-product .rp-product__body {
  padding: var(--rp-space-3) var(--rp-space-4);
  flex: 1;
}
.rp-related li.rp-product .rp-product__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--rp-bg);
}
.rp-related li.rp-product .rp-product__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--rp-space-4);
}