/* =========================================================
   PIKA LAMP CONFIGURATOR – FULL CSS (drop-in replacement)
   ========================================================= */

.pika-lc{
  /* zmienne */
  --plc-accent: #333;       /* główny kolor (zamiast brązów) */
  --plc-border: #e6e6e6;    /* delikatny border */
  --plc-bg: #fff;

  /* typografia i “pudełko” */
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#222;
  line-height:1.6;

  /* kontener + układ */
  max-width:1140px;
  margin:24px auto;
  background:var(--plc-bg);
  border:1px solid var(--plc-border);
  border-radius:16px;
  padding:24px;
  box-sizing:border-box;

  display:grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap:24px;
  align-items:start;
}

/* --- Nagłówek kroku --- */
#current-step-title{
  font-size:clamp(20px, 2.2vw, 28px);
  font-weight:400;               /* max 400 */
  color:var(--plc-accent);
  margin:0 0 16px 0;
}

/* --- Lista opcji (lewa kolumna) --- */
#options-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:16px;
  align-items:start;
  justify-items:center;          /* ładnie w środku */
}

/* Kafelek – równe wymiary */
.pika-lc__option{
  width:100%;
  max-width:170px;
  height:210px;                  /* stała wysokość kafla */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;

  background:#fff;
  border:1px solid var(--plc-border);
  border-radius:12px;
  padding:12px 10px;
  cursor:pointer;
  transition:border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.pika-lc__option:hover,
.pika-lc__option:focus-visible{
  border-color:#cfcfcf;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.pika-lc__option:active{ transform:translateY(1px); }

/* Równy box na grafikę */
.pika-lc__option img{
  display:block;
  width:100%;
  height:120px;                  /* stała wysokość pola na obraz */
  object-fit:contain;
  object-position:center;
  margin:4px auto 8px;
}

/* Podpis – stała wysokość */
.pika-lc__option .name{
  min-height:40px;               /* 1–2 linie */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:400;               /* bez grubasów */
  color:#333;
  text-align:center;
}

/* --- Podgląd i meta (prawa kolumna) --- */
.pika-lc__right{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:12px;
}

.pika-lc__preview{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
  background:#fafafa;
  border:1px solid var(--plc-border);
  border-radius:12px;
  padding:12px;
}
.pika-lc__preview img#product-image{
  max-width:100%;
  max-height:300px;
  width:auto;
}

/* komunikat w podglądzie (tworzony w JS) */
.pika-lc__preview-msg{
  background:#fafafa;
  border:1px dashed var(--plc-border);
  border-radius:12px;
  color:#333;
  padding:24px;
  text-align:center;
}

/* Meta / nazwa / opis / cena */
#product-name{
  font-size:clamp(16px, 1.8vw, 20px);
  font-weight:400;
  margin:8px 0 2px;
}
#product-description{ margin:0 0 6px; }
.pika-lc__price{
  color:var(--plc-accent);
  font-weight:400;               /* max 400 */
}

/* --- Przyciski --- */
.pika-lc__actions{ display:flex; gap:10px; margin-top:12px; }

.pika-lc__btn,
.pika-lc a.pika-lc__btn,
#btn-back,#btn-reset{
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);     /* delikatniejszy border */
  background:var(--plc-accent);
  color:#fff;
  text-decoration:none;
  font-weight:400;                       /* Montserrat 400 */
  line-height:1.2;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* “primary” (np. Zobacz w sklepie) – ciemniejszy hover + zawsze biały tekst */
.pika-lc__btn:hover,
.pika-lc__btn:focus-visible,
.pika-lc a.pika-lc__btn:hover{
  background:#4d4d4d;
  border-color:#4d4d4d;
  color:#fff !important;
}

/* Ghosty (Wstecz/Reset) */
#btn-back,#btn-reset{
  background:transparent;
  color:var(--plc-accent);
  border-color:rgba(0,0,0,.22);
}
#btn-back:hover,#btn-reset:hover{
  background:#f6f6f6;
  color:var(--plc-accent) !important;
}

/* --- Pasek postępu --- */
.pika-lc__progress{
  position:relative;
  height:6px;
  background:#eaeaea;
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
#progress-bar{
  display:block;
  height:100%;
  background:var(--plc-accent);
  border-radius:999px;
  width:0%;
  transition:width .25s ease;
}

/* --- Ograniczenie „boldów” w obrębie konfiguratora --- */
.pika-lc b, .pika-lc strong{ font-weight:400; }

/* ============ Responsive ============ */
@media (max-width:980px){
  .pika-lc{
    grid-template-columns:1fr;
    padding:20px;
    gap:20px;
  }
  #options-list{
    max-width:680px;
    margin:0 auto;
  }
  .pika-lc__right{
    max-width:900px;
    margin:0 auto;
  }
}
@media (max-width:680px){
  .pika-lc{ padding:16px; border-radius:12px; margin:16px auto; }
  #options-list{
    grid-template-columns:repeat(2, minmax(0, 1fr)); /* większe kafelki, 2 w rzędzie */
    justify-items:center;
  }
  .pika-lc__option{ height:220px; }
  .pika-lc__option img{ height:130px; }
  .pika-lc__preview{ min-height:260px; }
}