/*
Theme Name: SpareParts Dark
Theme URI: https://example.com/
Author: ChatGPT
Author URI: https://example.com/
Description: Dark/red automotive parts landing + catalog-ready WordPress theme (WooCommerce-ready later).
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spareparts-dark
Tags: one-column, two-columns, right-sidebar, custom-logo, custom-header, editor-style, block-styles
*/

:root{
  /* =====================================================
     PANEL STEROWANIA (jedno miejsce do zmian)
     -----------------------------------------------------
     1) CZCIONKI:
        - nagłówki (H1/H2/H3): --font-head, --fs-h1/2/3
        - tekst zwykły:         --font-base, --fs-text
     2) ZDJĘCIA (HOME + KONTAKT):
        - podmień grafikę:      --hero-bg-url
        - rozmycie:             --hero-bg-blur
        - jasność / kontrast:   --hero-bg-bright / --hero-bg-contrast
     ===================================================== */

  /* KOLORY / BAZA */
  --bg:#111214;
  --panel:#1b1d20;
  --panel2:#22252a;
  --text:#f2f2f2;
  --muted:#b5b5b5;
  --border:#2d323a;
  --accent:#d10000;
  --accent2:#ff1a1a;

  /* LAYOUT */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 10px;
  --maxw: 1180px;
  --gap: 18px;

  /* TYPOGRAFIA */
  --font-base: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --font-head: Oswald, "Bebas Neue", system-ui, sans-serif;

  /* Skala typografii */
  --fs-text: 16px;    /* opisy, adres, VIN, treści */
  --fs-h3: 19px;      /* OŚWIETLENIE / PRECYZYJNY DOBÓR / nagłówki w banerach */
  --fs-h2: 18px;      /* (opcjonalnie) jeśli chcesz mieć H2 jak H3 ustawione identycznie */
  --fs-h1: 40px;      /* główny tytuł HERO */

  /* Kafelki / karty (HOME) */
  --fs-tile-desc: 13px;     /* opisy w kafelkach (Lampy..., Klocki...) */
  --fs-product-desc: 13px;  /* opisy w kartach produktów */

  /* Ceny (HOME) */
  --font-price: var(--font-head);
  --fs-price: 26px;
  --fs-old-price: 14px;
  --fw-price: 800;

  /* Wagi */
  --fw-text: 400;
  --fw-h3: 700;
  --fw-h2: 700;
  --fw-h1: 800;

  /* Ceny w kartach produktów */
  --font-price: var(--font-head);
  --fs-price: 26px;
  --fw-price: 800;
  --fs-old-price: 14px;
  --fw-old-price: 700;

  /* Obrazki w kartach produktów (sekcja POPULARNE)
     contain = pokazuje cały produkt (bez ucięcia)
     cover   = wypełnia kadr (może ucinać krawędzie)
  */
  --product-img-fit: contain;
  --product-img-pad: 10px;

  /* Wspólne tło HERO (HOME + KONTAKT) */
  --hero-bg-url: url("/wp-content/uploads/banery/hero-mrpmoto1.png");
  --hero-bg-blur: 0.6px;
  --hero-bg-bright: .92;
  --hero-bg-contrast: .95;

  /* MENU / NAWIGACJA (niezależnie od --fs-text) */
  --fs-menu: 15px;
  --fw-menu: 900;
  --ls-menu: .04em;

}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 600px at 60% 0%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, #0f1012, var(--bg));
  color:var(--text);
  font-family:var(--font-base);
  line-height:1.55;
}
a{color:inherit}
a:hover{color:var(--accent2)}
img{max-width:100%;height:auto;border-radius:8px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.site-topbar{
  background:#0b0c0e;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)
}
.site-topbar .container{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:7px 16px}
.topbar-right{display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.topbar-item{white-space:nowrap}
.topbar-links a{color:var(--muted);text-decoration:none;margin-right:10px}
.topbar-links a:hover{color:var(--text)}
.site-header{
  position:sticky;top:0;z-index:99;
  background: linear-gradient(180deg, rgba(22,23,26,.95), rgba(18,19,22,.90));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:grid;
  grid-template-columns: 220px 1fr 260px;
  gap:var(--gap);
  align-items:center;
  padding:14px 16px;
}
.site-branding{display:flex;align-items:center;gap:12px}
.site-title{
  font-family:var(--font-head);
  font-size:28px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
}
.site-title a{text-decoration:none}
.logo-badge{
  width:44px;height:44px;border-radius:10px;
  background: linear-gradient(135deg, var(--accent), #7c0000);
  box-shadow: var(--shadow);
  display:grid;place-items:center;font-weight:800;
}
.header-right{
  display:flex;gap:10px;justify-content:flex-end;align-items:center;color:var(--muted);font-size:13px
}
.header-chip{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding:8px 10px;border-radius:999px;
  display:flex;align-items:center;gap:8px;
}
.header-chip b{color:var(--text);font-weight:700}
.search-wrap form{display:flex;gap:8px}
.search-wrap input[type="search"]{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;border-radius:999px;
  outline:none;
}
.search-wrap input[type="search"]::placeholder{color:#9aa3ad}
.search-wrap button{
  background: var(--accent);
  border:0;color:white;
  padding:10px 14px;border-radius:999px;
  cursor:pointer;font-weight:700;
}
.search-wrap button:hover{background:var(--accent2)}
.main-nav{
  border-top:1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.main-nav .container{padding:0 16px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.main-nav a{
  display:block;padding:10px 12px;
  text-decoration:none;color:var(--muted);
  border-radius:8px;
}
.main-nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.main{
  padding:22px 0 40px;
}
.grid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:var(--gap);
  align-items:start;
}
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel h2, .panel h3{
  margin:0;
  font-family:var(--font-head);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.sidebar-title{
  background: rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
  padding:12px 14px;
  font-size:16px;
}
.cat-menu{margin:0;padding:0;list-style:none}
.cat-menu a{
  display:block;
  padding:14px 16px;
  text-decoration:none;
  background: linear-gradient(180deg, var(--accent), #b00000);
  border-bottom:1px solid rgba(0,0,0,.25);
  color:#0b0c0e;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cat-menu a:hover{filter:brightness(1.08)}
.cat-menu li:last-child a{border-bottom:0}

.side-head{margin:0 0 10px; font-family:var(--font-head); letter-spacing:.06em; text-transform:uppercase;}
.side-text{margin:0 0 10px;color:var(--muted);font-size:13px}

.entry-content{color:var(--text);font-size:15px}
.entry-content a{text-decoration:underline}
.entry-content iframe{width:100%;max-width:100%;border:0;border-radius:10px}
.entry-content textarea{max-width:100%}

.hero{
  min-height:280px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:var(--gap);
  padding:18px;
  align-items:center;
  position:relative;
  background:
    radial-gradient(700px 260px at 70% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.hero.has-header-image{
  background:
    radial-gradient(700px 260px at 70% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.50), rgba(0,0,0,.10)),
    var(--hero-image);
  background-size:cover;
  background-position:center;
}
.hero h1{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 8px;
  font-size:40px;
  line-height:1.1;
}
.hero p{margin:0 0 14px;color:var(--muted);max-width:60ch}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:10px;
  text-decoration:none;font-weight:800;
  border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:white}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--border);
  color:var(--text)
}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.hero-card{
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:14px;
}
.hero-card b{display:block;font-size:14px;margin-bottom:6px}
.hero-card small{color:var(--muted)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badge{
  font-size:12px;color:var(--muted);
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding:6px 10px;border-radius:999px;
}

.tiles{
  margin-top:var(--gap);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap);
}
.tile{
  padding:0;
  overflow:hidden;
  position:relative;
  min-height:140px;
  background:
    radial-gradient(500px 160px at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.tile .inner{padding:14px}
.tile h3{font-size:18px;margin:0 0 8px}
.tile p{margin:0;color:var(--muted);font-size:var(--fs-tile-desc);font-family:var(--font-base);font-weight:var(--fw-text)}
.tile .cta{margin-top:10px}
.tile .label{
  position:absolute;right:10px;top:10px;
  font-family:var(--font-head);letter-spacing:.06em;text-transform:uppercase;
  background:rgba(209,0,0,.15);border:1px solid rgba(209,0,0,.35);
  padding:6px 10px;border-radius:999px;font-size:12px
}

.section-title{
  margin-top:var(--gap);
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.tabs{display:flex;gap:10px;font-size:12px;color:var(--muted)}
.tabs a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:999px;border:1px solid transparent}
.tabs a:hover{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.03)}
.products{
  padding:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap);
}
.product-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background: rgba(0,0,0,.18);
}
.product-img{
  position:relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(220px 120px at 60% 35%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  display:grid;place-items:center;
  color:rgba(255,255,255,.25);
  font-weight:900;
  font-family:var(--font-head);
  letter-spacing:.08em;
  padding: var(--product-img-pad);
}
.product-img img{
  width:100%;
  height:100%;
  object-fit: var(--product-img-fit);
  display:block;
  border-radius: 8px;
}
.product-img-text{opacity:.5}
.product-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;font-size:12px;color:#fff;font-weight:800;letter-spacing:.08em}
.product-body{padding:12px}
.price{
  font-family:var(--font-price);
  font-size:var(--fs-price);
  font-weight:var(--fw-price);
  letter-spacing:.04em;
  margin:0 0 8px;
}
.price .old{font-size:var(--fs-old-price);font-weight:var(--fw-old-price);color:var(--muted);text-decoration:line-through;margin-left:8px}

.product-title{
  margin:0 0 6px;
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:var(--fw-h3);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.product-desc{
  margin:0 0 10px;
  color:var(--muted);
  font-family:var(--font-base);
  font-size:var(--fs-product-desc);
  font-weight:var(--fw-text);
}
.product-desc p{margin:0 0 10px}
.product-desc p:last-child{margin-bottom:0}
.product-actions{display:flex;gap:10px}
.product-actions a{flex:1;justify-content:center}

.site-footer{
  border-top:1px solid var(--border);
  background:#0b0c0e;
  padding:26px 0;
  color:var(--muted);
  font-size:13px;
}
.footer-grid{
  display:grid;grid-template-columns: 1.5fr 1fr 1fr;
  gap:var(--gap);
}
.site-footer h4{
  margin:0 0 10px;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text);
}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text)}
.smallprint{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}

@media (max-width: 980px){
  .site-header .container{grid-template-columns: 1fr;gap:10px}
  .header-right{justify-content:flex-start;flex-wrap:wrap}
  .grid{grid-template-columns: 1fr}
  .tiles{grid-template-columns: 1fr}
  .products{grid-template-columns: 1fr}
  .hero{grid-template-columns: 1fr}
}
.gmap-embed { margin-top: 14px; }
.gmap-sv, .gmap-map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.gmap-sv { height: 220px; margin-bottom: 12px; }
.gmap-map { height: 380px; }
.gmap-sv iframe, .gmap-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.gmap-links { margin: 10px 0 0; }
.gmap-links a { text-decoration: none; color: var(--muted); }
.gmap-links a:hover { color: var(--text); }
.contact-map iframe{
  width: 100%;
  border: 0;
  display: block;
}

.contact-map{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.02);
  margin-top: 14px;
}

.page h1,
.page .entry-title,
.page .wp-block-post-title {
  display: none !important;
}

.topbar-home{
  color: var(--muted);
  text-decoration: none;
  margin-right: 10px;
}
.topbar-home:hover{ color: var(--text); }

/* HERO - punkty jak kafelki (OŚWIETLENIE / opis) — typografia 1:1 z kafelkami */
.hero-points{
  list-style: none;
  padding: 0;
  margin: 10px 0 14px;   /* zostawiamy odstępy jak były u Ciebie */
}
.hero-points li{
  margin: 0 0 8px;       /* zostawiamy odstępy jak były u Ciebie */
}
.hero-points li:last-child{
  margin-bottom: 0;
}
/* Tytuł: identycznie jak kafelki (.tile h3) */
.hero-points .hp-title{
  display: block;
  font-family: var(--font-head);
  font-size: 18px;        /* jak .tile h3 */
  font-weight: 700;
  letter-spacing: .05em;  /* jak .panel h2, .panel h3 */
  text-transform: uppercase;
  margin: 0;
}
/* Opis: identycznie jak opisy kafelków (.tile p) */
.hero-points .hp-desc{
  display: block;
  font-size: 13px;        /* jak .tile p */
  color: var(--muted);    /* jak .tile p */
  font-weight: 400;
  margin-top: 2px;
  opacity: 1;             /* tile p nie ma opacity, więc wyrównujemy */
  line-height: inherit;
}

/* =====================================================
   USTAWIENIA ZARZĄDZANE (nie dubluj poniżej innych reguł)
   Wszystko, co chcesz zmieniać globalnie, rób tu lub w :root.
   ===================================================== */

/* Tekst bazowy */
body{
  font-family: var(--font-base);
  font-size: var(--fs-text);
}

/* HERO H1 */
.hero h1{
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
}

/* Wspólny styl nagłówków H3 (kafelki + hero-points + kontakt) */
.tile h3,
.hero .hp-title,
.contact-hero__headline,
.contact-hero__title,
.contact-hero__brand{
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.05;
}

/* Opisy (jak "Dobór części po nr VIN...") */
.tile p,
.hero .hp-desc,
.contact-hero__desc{
  font-family: var(--font-base);
  font-size: var(--fs-text);           /* identycznie jak kafelki (nie rusza układu) */
  font-weight: var(--fw-text);
  line-height: 1.2;
  color: var(--muted);
  margin: 0 0 6px;
}

/* Delikatne podbicie czytelności nagłówków na zdjęciu */
.hero h1,
.hero .hp-title{
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* =====================================================
   WSPÓLNE TŁO (HOME + KONTAKT) — sterowanie jedną opcją
   Uwaga: tło jest na ::before, więc tekst pozostaje ostry.
   ===================================================== */

body.home .hero,
body.front-page .hero,
.contact-hero{
  position: relative;
  overflow: hidden;
}

/* miękkie tło */
body.home .hero::before,
body.front-page .hero::before,
.contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-bg-url) center/cover no-repeat;
  filter: blur(var(--hero-bg-blur)) brightness(var(--hero-bg-bright)) contrast(var(--hero-bg-contrast));
  transform: scale(1.06);
  z-index:0;
}

/* overlay */
body.home .hero::after,
body.front-page .hero::after,
.contact-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 260px at 70% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  z-index:1;
}

/* treść nad tłem */
body.home .hero > *,
body.front-page .hero > *{
  position: relative;
  z-index:2;
}

/* Kontakt: treść jest absolute w HTML — dajemy wysokość i warstwę */
.contact-hero{
  min-height: 300px;
}
.contact-hero__content{
  position: absolute;
  inset: 0;
  z-index:2;
  padding: 24px 26px;
}
.contact-hero__wrap{ max-width: 520px; }

/* Jeśli masz w HTML <img class="contact-hero__bg"> — ukryj (bo tło idzie z ::before) */
.contact-hero__bg{ display:none; }

/* Menu boczne (Kategorie) — stały rozmiar niezależny od opisów */
.cat-menu a{
  font-family: var(--font-head);
  font-size: var(--fs-menu);
  font-weight: var(--fw-menu);
  letter-spacing: var(--ls-menu);
  text-transform: uppercase;
}
/* Usuń etykiety (badge) z kafelków */
.tile .label{
  display: none;
}

/* ==========================================================
   POPULARNE / Kafelki produktów – stałe okno zdjęcia + skalowanie
   (przeniesione z "Dodatkowego CSS", żeby działało w motywie)
   ========================================================== */
.products .product-card .product-img{
  height: clamp(160px, 18vw, 240px);
  overflow: hidden;
  padding: 10px;
  display: block;
  box-sizing: border-box;
}

.products .product-card .product-img > img,
.products .product-card .product-img img.wp-post-image{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* zmień na cover jeśli chcesz ucinać */
}