/* Iskalnik vzmetnic — layout on top of the Organic design system (organic.css) */
:root { --font-heading: "Caprasimo", "Fraunces", serif; }
/* Caprasimo has no č/š/ž; the browser falls back to Fraunces 900 (SOFT 100) for those glyphs */
h1, h2, h3, h4, .btn, .heading-face {
  font-family: var(--font-heading); font-weight: 900; font-synthesis: none;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
body { margin: 0; background: var(--color-neutral-200); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
a.btn-primary, a.btn-primary:hover { color: var(--color-bg); }
[hidden] { display: none !important; }

.page {
  min-height: 100vh; box-sizing: border-box; padding: 48px 24px;
  display: flex; justify-content: center; align-items: flex-start; font-family: var(--font-body);
}
.frame {
  width: 100%; max-width: 1000px; min-height: 620px;
  background: var(--color-bg); border-radius: 36px; box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  padding: 14px; gap: 14px;
}
.pane { padding: 34px 34px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pane > * { margin: 0; }

/* intro */
.cats { display: flex; flex-direction: column; gap: 6px; }
.cats-label { font-size: 13px; color: var(--color-neutral-700); }
.cats-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cat {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--color-divider);
  font-weight: 600; font-size: 14px; color: var(--color-text); text-decoration: none;
}
.cat:hover { border-color: var(--color-accent-400); color: var(--color-text); }
.cat.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.intro-title { margin-top: 40px !important; font-size: 48px; max-width: 500px; }
.lead { max-width: 470px; font-size: 16px; color: var(--color-neutral-800); text-wrap: pretty; }
.btn-start { align-self: flex-start; font-size: 16px; padding: 15px 26px; margin-top: 10px !important; }

/* question */
.step-label { font-size: 15px; color: var(--color-accent-700); }
.q-title { max-width: 500px; }
.hint { color: var(--color-neutral-700); }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px !important; }
.opt {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 999px;
  border: 2px solid transparent; background: var(--color-neutral-100);
  cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.opt:hover { border-color: var(--color-accent-400); }
.opt[aria-pressed="true"] { background: var(--color-accent-100); border-color: var(--color-accent); }
.opt-ind {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--color-neutral-400); background: transparent;
}
.opt.multi .opt-ind { border-radius: 8px; }
.opt-ind svg { opacity: 0; }
.opt[aria-pressed="true"] .opt-ind { border-color: var(--color-accent); background: var(--color-accent); }
.opt[aria-pressed="true"] .opt-ind svg { opacity: 1; }
.opt-label { font-size: 15px; font-weight: 600; flex: 1; }
.opt-sub { font-size: 12px; color: var(--color-neutral-700); }
.nav-row { margin-top: auto !important; padding-top: 18px; display: flex; justify-content: space-between; gap: 10px; }
.nav-row .btn { font-size: 15px; padding: 11px 22px; }

/* email gate */
.email-row { display: flex; gap: 10px; max-width: 480px; }
.email-row .input { min-height: 48px; font-size: 15px; }
.email-row .btn { flex: none; font-size: 15px; padding: 12px 22px; }
.form-error { color: var(--color-accent-700); font-size: 14px; }

/* result */
.product { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 20px; align-items: start; }
.product-img { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: var(--color-neutral-100); }
.product-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
.badge-oeko { background: var(--color-accent-2-700); color: var(--color-accent-2-100); font-weight: 700; letter-spacing: 0.06em; }
.badge-bb { background: var(--color-accent); color: var(--color-bg); font-weight: 700; }
.product-info { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.stars { color: var(--color-accent); letter-spacing: 3px; }
.stars small { letter-spacing: 0; font-size: 12px; color: var(--color-neutral-700); margin-left: 4px; }
.product-info h3 { margin: 0; }
.product-desc { margin: 0; font-size: 14px; color: var(--color-neutral-800); }
.product-note { margin: 0; font-size: 13px; color: var(--color-accent-2-800); }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size {
  padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--color-divider);
  background: transparent; color: var(--color-text); font: inherit; font-size: 12px; cursor: pointer;
}
.size[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.price { font-size: 26px; line-height: 1.1; }
.price s { display: block; font-family: var(--font-body); font-size: 13px; color: var(--color-neutral-700); }
.buy .btn { font-size: 15px; padding: 12px 18px; }
.btn-restart { align-self: flex-start; font-size: 14px; margin-top: auto !important; }

/* right panel */
.panel {
  background: var(--color-accent-2-200); border-radius: 28px; padding: 30px;
  display: flex; flex-direction: column; gap: 18px; color: var(--color-accent-2-900); min-width: 0;
}
.panel h3 { margin: 0; }
.panel-list { display: flex; flex-direction: column; gap: 12px; }
.prow { display: flex; gap: 12px; align-items: flex-start; }
.pdot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--color-accent-2-400); }
.prow.set .pdot { background: var(--color-accent-2-600); }
.pk { display: block; font-size: 12px; color: var(--color-accent-2-800); }
.pv { display: block; font-size: 15px; font-weight: 600; color: var(--color-accent-2-700); }
.prow.set .pv { color: var(--color-accent-2-900); }
.reason-ck { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent-2-600); }
.reason-tx { font-size: 15px; padding-top: 2px; }

.meter {
  margin-top: auto; background: var(--color-bg); border-radius: 24px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; color: var(--color-text);
}
.meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--color-neutral-700); }
.meter-label { font-family: var(--font-heading); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: 17px; color: var(--color-text); }
.meter-track { position: relative; height: 14px; border-radius: 999px; background: var(--color-neutral-300); }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 999px; background: var(--color-accent-300); transition: width .35s; }
.meter-knob {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--color-accent); border: 4px solid var(--color-bg);
  box-shadow: var(--shadow-sm); transition: left .35s;
}
.meter-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-neutral-700); }

@media (max-width: 560px) {
  .page { padding: 16px 12px; }
  .frame { border-radius: 28px; padding: 10px; }
  .pane { padding: 22px 16px 16px; }
  .panel { padding: 22px; }
  .intro-title { font-size: 36px; margin-top: 24px !important; }
  h2 { font-size: 27px; }
  .opt { border-radius: 24px; padding: 12px 16px; }
  .email-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .meter-fill, .meter-knob { transition: none; } }