/* GreenTouch — wizard „Fă-ți un kit" (7 pași). Scope STRICT sub .gt-kit-w. Nu atinge designul aprobat. */

/* Offset sub header-ul fix (.hdr, position:fixed) la încărcarea inițială, ca titlul
   „Construiește-ți kitul…" și subtitlul să nu fie acoperite pe mobil. Header-ul extins
   are ≈62px; lăsăm spațiu suficient fără gol exagerat. Se ține cont de bara admin WP. */
.gt-kit-mount { padding-top: clamp(88px, 11vh, 112px); }
body.admin-bar .gt-kit-mount { padding-top: calc(clamp(88px, 11vh, 112px) + 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .gt-kit-mount { padding-top: calc(clamp(88px, 11vh, 112px) + 46px); }
}

.gt-kit-w { max-width: 1120px; margin: 0 auto; }
.gt-kit-w * { box-sizing: border-box; }

.gt-kit-head { margin-bottom: 18px; }
.gt-kit-h1 { font: 800 clamp(30px, 5vw, 46px)/1.05 var(--font-display, serif); color: var(--ink, #1d2019); margin: 0 0 10px; letter-spacing: -.01em; }
.gt-kit-sub { font: 500 15px var(--font-ui, sans-serif); color: var(--ink-60, #5b5f54); margin: 0 0 18px; }

/* Indicator pași */
.gt-kit-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.gt-kit-steps.scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.gt-kit-step {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(29,32,25,.14);
  background: #fff; color: var(--ink-60, #5b5f54); font: 600 12.5px var(--font-ui, sans-serif); cursor: default;
}
.gt-kit-step .n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: rgba(29,32,25,.08); font-size: 11px; }
.gt-kit-step.done { background: var(--green-pale, #e7ede1); color: var(--green-900, #1d2a17); border-color: transparent; cursor: pointer; }
.gt-kit-step.done .n { background: rgba(29,42,23,.18); }
.gt-kit-step.active { background: var(--green-900, #1d2a17); color: #fff; border-color: transparent; }
.gt-kit-step.active .n { background: rgba(255,255,255,.22); }

.gt-kit-bar { height: 6px; border-radius: 999px; background: rgba(29,32,25,.10); overflow: hidden; margin-bottom: 22px; }
.gt-kit-bar > i { display: block; height: 100%; background: var(--green-900, #1d2a17); border-radius: 999px; transition: width .25s ease; }

/* Layout 2 coloane */
.gt-kit-cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) { .gt-kit-cols { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.gt-kit-card { background: #fff; border: 1px solid rgba(29,32,25,.10); border-radius: 20px; padding: 24px; }
.gt-kit-step-title { font: 800 20px var(--font-display, serif); color: var(--ink, #1d2019); margin: 0 0 4px; }
.gt-kit-step-note { font: 500 13px var(--font-ui, sans-serif); color: var(--ink-60, #5b5f54); margin: 0 0 16px; }

/* Carduri opțiune (rame, mușchi, plante, unelte) */
.gt-kit-opts { display: flex; flex-direction: column; gap: 10px; }
.gt-kit-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(29,32,25,.14);
  background: #fff; cursor: pointer; font-family: var(--font-ui, sans-serif); min-height: 56px; color: var(--ink, #1d2019);
}
.gt-kit-opt:hover:not(:disabled) { border-color: rgba(29,42,23,.4); }
.gt-kit-opt.sel { border-color: var(--green-900, #1d2a17); background: var(--green-pale, #eef2e9); }
.gt-kit-opt:disabled { opacity: .45; cursor: not-allowed; }
.gt-kit-opt-thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; background: #efe9dd; border: 2px solid #c9a66b; display: inline-flex; }
.gt-kit-opt-body { flex: 1 1 auto; min-width: 0; }
.gt-kit-opt-name { font: 700 15px var(--font-ui, sans-serif); }
.gt-kit-opt-meta { font: 500 12.5px var(--font-ui, sans-serif); color: var(--ink-60, #5b5f54); margin-top: 2px; }
.gt-kit-opt-price { font: 700 16px var(--font-ui, sans-serif); white-space: nowrap; }

/* Opțiuni compacte pe rând (mușchi/plante/unelte) */
.gt-kit-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.gt-kit-pill {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 18px; border-radius: 14px; border: 1.5px solid rgba(29,32,25,.14);
  background: #fff; cursor: pointer; font-family: var(--font-ui, sans-serif); min-height: 56px; justify-content: center; color: var(--ink, #1d2019);
}
.gt-kit-pill.sel { border-color: var(--green-900, #1d2a17); background: var(--green-900, #1d2a17); color: #fff; }
.gt-kit-pill:disabled { opacity: .45; cursor: not-allowed; }
.gt-kit-pill .t { font: 700 14px var(--font-ui, sans-serif); }
.gt-kit-pill .p { font: 600 12px var(--font-ui, sans-serif); opacity: .8; }

/* Culori ramă (pătrate) */
.gt-kit-swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.gt-kit-sw { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.gt-kit-sw .box { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(29,32,25,.2); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gt-kit-sw.sel .box { outline: 2.5px solid var(--green-900, #1d2a17); outline-offset: 2px; }
.gt-kit-sw .lbl { font: 600 12.5px var(--font-ui, sans-serif); color: var(--ink, #1d2019); }
.gt-kit-sw:disabled { opacity: .4; cursor: not-allowed; }

/* Buline licheni (compact) */
.gt-kit-dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 56px)); gap: 10px; }
.gt-kit-dot { position: relative; width: 56px; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gt-kit-dot .b { width: 40px; height: 40px; border-radius: 999px; background: var(--cc, #9aa886); border: 1px solid rgba(29,32,25,.18); box-shadow: 0 1px 2px rgba(0,0,0,.10); position: relative; }
.gt-kit-dot.sel .b { outline: 2.5px solid var(--green-900, #1d2a17); outline-offset: 2px; }
.gt-kit-dot.sel .b::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 0 2px rgba(0,0,0,.6); }
.gt-kit-dot .l { font: 500 11px var(--font-ui, sans-serif); color: var(--ink-60, #5b5f54); text-align: center; line-height: 1.15; }
.gt-kit-dot:disabled { opacity: .4; cursor: not-allowed; }
.gt-kit-dot:focus-visible .b, .gt-kit-sw:focus-visible .box, .gt-kit-opt:focus-visible { outline: 2px solid var(--green-900); outline-offset: 2px; }

/* Navigare */
.gt-kit-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(29,32,25,.1); }
.gt-kit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer; font: 700 14px var(--font-ui, sans-serif); }
.gt-kit-back { background: var(--sand, #efeadd); color: var(--ink, #1d2019); }
.gt-kit-next { background: var(--green-900, #1d2a17); color: #fff; }
.gt-kit-next:disabled { opacity: .4; cursor: not-allowed; }
.gt-kit-add { background: var(--green-900, #1d2a17); color: #fff; width: 100%; min-height: 56px; font-size: 15px; }

/* Rezumat */
.gt-kit-sumline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--sand-50, #f5f1e8); border-radius: 12px; font: 600 13.5px var(--font-ui, sans-serif); color: var(--ink, #1d2019); }
.gt-kit-sumline + .gt-kit-sumline { margin-top: 8px; }
.gt-kit-sumline .pz { white-space: nowrap; }

/* Previzualizare live (dreapta) */
.gt-kit-prev { background: var(--sand-50, #f3efe6); border-radius: 20px; padding: 22px; position: sticky; top: 16px; }
.gt-kit-prev-t { font: 700 11px var(--font-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50, #7a7d70); margin: 0 0 16px; }
.gt-kit-stage { display: flex; align-items: center; justify-content: center; padding: 18px 0 24px; min-height: 240px; }
.gt-kit-frame { position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.12); background: #3f5233; }
.gt-kit-frame .inner { position: absolute; inset: 10px; background: #3f5233; overflow: hidden; }
.gt-kit-frame.round, .gt-kit-frame.round .inner { border-radius: 999px; }
.gt-kit-lich { position: absolute; border-radius: 999px; opacity: .92; }

.gt-kit-summary { border-top: 1px solid rgba(29,32,25,.12); padding-top: 14px; }
.gt-kit-srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 13px var(--font-ui, sans-serif); color: var(--ink-60, #5b5f54); padding: 4px 0; }
.gt-kit-srow b { color: var(--ink, #1d2019); font-weight: 700; }
.gt-kit-diff { display: inline-flex; align-items: center; gap: 8px; }
.gt-kit-diff .track { width: 60px; height: 6px; border-radius: 999px; background: rgba(29,32,25,.12); overflow: hidden; }
.gt-kit-diff .track > i { display: block; height: 100%; background: var(--green-900, #1d2a17); }

@media (max-width: 560px) {
  .gt-kit-card, .gt-kit-prev { padding: 18px; border-radius: 16px; }
  .gt-kit-prev { position: static; }
}