/* XSTORE Smart Advisor */
.xa { max-width: 920px; margin: 0 auto 48px; padding: 0 14px 40px; color: #1c1c22; }
.xa .breadcrumb { margin: 12px 0 8px; }
.xa-hero { margin: 8px 0 20px; }
.xa-hero__badge {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #000000; background: #f3ead3; border-radius: 999px; padding: 6px 12px; margin-bottom: 12px;
}
.xa-hero__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 10px; color: #1a1a1a; line-height: 1.2;
}
.xa-hero__lead { font-size: 16px; line-height: 1.55; color: #4b4b55; margin: 0; max-width: 40em; }

.xa-card {
  background: #fff; border: 1px solid #e8e4dc; border-radius: 20px;
  padding: 22px 20px 18px; box-shadow: 0 14px 40px rgba(17,17,20,.06);
}
.xa-progress {
  height: 4px; background: #efece6; border-radius: 999px; overflow: hidden; margin-bottom: 10px;
}
.xa-progress__bar {
  display: block; height: 100%; width: 25%;
  background: linear-gradient(90deg, #1d1d1f, #000000);
  border-radius: 999px; transition: width .25s ease;
}
.xa-steps-label { font-size: 12px; font-weight: 700; color: #8a8a94; margin-bottom: 14px; letter-spacing: .04em; }
.xa-q { font-size: 1.2rem; font-weight: 750; margin: 0 0 14px; color: #111; }

.xa-options { display: flex; flex-direction: column; gap: 8px; }
.xa-options--grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
@media (max-width: 560px) {
  .xa-options--grid { grid-template-columns: 1fr; }
}
.xa-opt {
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid #e6e2da;
  background: #faf9f6;
  font-size: 15px; font-weight: 650; color: #1c1c22;
  cursor: pointer; transition: .15s;
}
.xa-opt:hover { border-color: #1d1d1f; background: #fff; }
.xa-opt.is-selected {
  border-color: #1d1d1f; background: #fff;
  box-shadow: 0 0 0 1px #1d1d1f inset, 0 8px 22px rgba(17,17,20,.05);
}

.xa-nav {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 18px;
}
.xa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 999px; font-weight: 750; font-size: 14.5px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: .15s;
}
.xa-btn--primary {
  background: #1a1a1a; color: #fff !important; border-color: #1a1a1a;
}
.xa-btn--primary:hover { background: #000000; border-color: #000000; color: #fff !important; }
.xa-btn--primary:disabled {
  opacity: .4; cursor: not-allowed; background: #999; border-color: #999;
}
.xa-btn--ghost {
  background: #fff; color: #333 !important; border-color: #ddd8cf;
}
.xa-btn--ghost:hover { border-color: #1d1d1f; color: #111 !important; }

.xa-results { margin-top: 28px; }
.xa-results__head { margin-bottom: 16px; }
.xa-results__head h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; color: #111; }
.xa-results__hint { color: #5c5c66; margin: 0 0 12px; line-height: 1.45; }
.xa-results__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.xa-loading { padding: 24px; text-align: center; color: #666; font-weight: 600; }
.xa-empty { color: #666; padding: 12px 0; }

.xa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.xa-product {
  background: #fff; border: 1px solid #e8e4dc; border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
  text-decoration: none !important; color: inherit;
}
.xa-product:hover {
  border-color: rgba(184,149,74,.45);
  box-shadow: 0 12px 32px rgba(17,17,20,.08);
}
.xa-product__img {
  aspect-ratio: 1; background: #f5f3ef;
  display: flex; align-items: center; justify-content: center;
}
.xa-product__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.xa-product__body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.xa-product__name {
  font-size: 13.5px; font-weight: 650; color: #1c1c22; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xa-product__price { font-weight: 800; color: #000000; font-size: 15px; margin-top: auto; }
.xa-product__price s { color: #999; font-weight: 500; margin-right: 6px; font-size: 13px; }

.xa-faq { margin-top: 36px; max-width: 720px; }
.xa-faq h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 12px; color: #111; }
.xa-faq__item {
  border: 1px solid #e8e4dc; border-radius: 12px; background: #fff;
  padding: 12px 14px; margin-bottom: 8px;
}
.xa-faq__item summary {
  cursor: pointer; font-weight: 700; color: #1c1c22; list-style: none;
}
.xa-faq__item summary::-webkit-details-marker { display: none; }
.xa-faq__item p { margin: 8px 0 0; color: #4b4b55; line-height: 1.5; font-size: 14.5px; }
'''

JS = r'''
(function () {
  function ready(fn) {
    if (document.readyState !== "loading") fn();
    else document.addEventListener("DOMContentLoaded", fn);
  }

  ready(function () {
    var root = document.getElementById("xa-wizard");
    if (!root) return;

    var url = root.getAttribute("data-url");
    var answers = { who: "", level: "", mood: "", budget: "" };
    var step = 1;
    var total = 4;

    var bar = document.getElementById("xa-progress-bar");
    var stepNum = document.getElementById("xa-step-num");
    var btnNext = document.getElementById("xa-next");
    var btnBack = document.getElementById("xa-back");
    var results = document.getElementById("xa-results");
    var grid = document.getElementById("xa-grid");
    var loading = document.getElementById("xa-loading");
    var empty = document.getElementById("xa-empty");
    var again = document.getElementById("xa-again");

    function currentKey() {
      var s = root.querySelector('.xa-step[data-step="' + step + '"]');
      var opts = s ? s.querySelector(".xa-options") : null;
      return opts ? opts.getAttribute("data-key") : "";
    }

    function showStep(n) {
      step = n;
      root.querySelectorAll(".xa-step").forEach(function (el) {
        var sn = parseInt(el.getAttribute("data-step"), 10);
        if (sn === step) {
          el.hidden = false;
          el.classList.add("is-active");
        } else {
          el.hidden = true;
          el.classList.remove("is-active");
        }
      });
      if (bar) bar.style.width = (step / total) * 100 + "%";
      if (stepNum) stepNum.textContent = String(step);
      if (btnBack) btnBack.hidden = step <= 1;
      updateNextEnabled();
    }

    function updateNextEnabled() {
      var key = currentKey();
      var ok = key && answers[key];
      if (btnNext) {
        btnNext.disabled = !ok;
        btnNext.textContent = step === total ? "Показать подборку" : "Далее";
      }
    }

    root.querySelectorAll(".xa-options").forEach(function (group) {
      group.addEventListener("click", function (e) {
        var btn = e.target.closest(".xa-opt");
        if (!btn || !group.contains(btn)) return;
        group.querySelectorAll(".xa-opt").forEach(function (b) {
          b.classList.remove("is-selected");
        });
        btn.classList.add("is-selected");
        var key = group.getAttribute("data-key");
        answers[key] = btn.getAttribute("data-value") || "";
        updateNextEnabled();
      });
    });

    if (btnNext) {
      btnNext.addEventListener("click", function () {
        if (btnNext.disabled) return;
        if (step < total) {
          showStep(step + 1);
        } else {
          runRecommend();
        }
      });
    }
    if (btnBack) {
      btnBack.addEventListener("click", function () {
        if (step > 1) showStep(step - 1);
      });
    }
    if (again) {
      again.addEventListener("click", function () {
        answers = { who: "", level: "", mood: "", budget: "" };
        root.querySelectorAll(".xa-opt").forEach(function (b) {
          b.classList.remove("is-selected");
        });
        results.hidden = true;
        root.hidden = false;
        showStep(1);
        window.scrollTo({ top: root.offsetTop - 40, behavior: "smooth" });
      });
    }

    function runRecommend() {
      root.hidden = true;
      results.hidden = false;
      grid.innerHTML = "";
      empty.hidden = true;
      loading.hidden = false;
      window.scrollTo({ top: results.offsetTop - 30, behavior: "smooth" });

      var body = new URLSearchParams();
      body.set("who", answers.who);
      body.set("level", answers.level);
      body.set("mood", answers.mood);
      body.set("budget", answers.budget);

      fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
        body: body.toString(),
        credentials: "same-origin",
      })
        .then(function (r) { return r.json(); })
        .then(function (json) {
          loading.hidden = true;
          if (!json || !json.success) {
            empty.hidden = false;
            return;
          }
          var title = document.getElementById("xa-result-title");
          var hint = document.getElementById("xa-result-hint");
          if (title && json.title) title.textContent = json.title;
          if (hint) hint.textContent = json.hint || "";

          if (!json.products || !json.products.length) {
            empty.hidden = false;
            return;
          }
          json.products.forEach(function (p) {
            var a = document.createElement("a");
            a.className = "xa-product";
            a.href = p.href;
            var priceHtml = p.special
              ? "<s>" + (p.price || "") + "</s> " + p.special
              : p.price || "";
            a.innerHTML =
              '<div class="xa-product__img"><img src="' +
              p.thumb +
              '" alt="" loading="lazy"></div>' +
              '<div class="xa-product__body"><div class="xa-product__name">' +
              escapeHtml(p.name) +
              '</div><div class="xa-product__price">' +
              priceHtml +
              "</div></div>";
            grid.appendChild(a);
          });
        })
        .catch(function () {
          loading.hidden = true;
          empty.hidden = false;
        });
    }

    function escapeHtml(s) {
      return String(s)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;");
    }

    showStep(1);
  });
})();
'''