/* ============================================================
   BIRO 404 — /primeri/ "Live Demo Stage" (R15)
   Replaces the R14 3D-panel showroom. ONE big live mini-site in
   focus + a right rail + a Google/Maps card + a bottom flow.
   Scoped under .pstage / .pstage-* (and .primeri-* for hub-level
   chrome outside the stage) — no global leakage, mirrors the
   pattern used by #mns-root inside the demo iframe.
   ============================================================ */

/* ---------------------------------------------------------------
   0. Stage design tokens — scoped to .pstage-scope (the section
   wrapping the whole stage), NOT :root, so the rest of the site
   keeps its graphite/silver palette (assets/css/site.css). See
   R15 spec §2.
   --------------------------------------------------------------- */
.pstage-scope{
  --stage-bg:        #100d0a;
  --stage-bg-2:      #17120e;
  --stage-panel:     #1a1512;
  --stage-panel-2:   #221a15;
  --stage-line:      rgba(232,163,61,.14);
  --stage-line-soft: rgba(255,255,255,.08);
  --ink:             #f4efe8;
  --ink-muted:       #b7ac9e;
  --ink-faint:       #8a8073;
  --amber:           #e8a33d;
  --amber-deep:      #c9832a;
  --amber-soft:      rgba(232,163,61,.12);
  --google-slate:    #5b8bb0;
  --google-slate-soft: rgba(91,139,176,.14);
  --radius:          14px;
  --radius-lg:       20px;
  --font-display:    'Anton','Space Grotesk',system-ui,sans-serif;
  --font-ui:         'Space Grotesk',system-ui,sans-serif;
  --font-mono:       'JetBrains Mono',ui-monospace,monospace;
  --shadow-stage:    0 30px 80px -30px rgba(0,0,0,.7);
  --stage-ease:      cubic-bezier(.16,1,.3,1);

  position:relative;
  background:var(--stage-bg);
  border-radius:28px;
  padding:clamp(1.75rem,4vw,3.25rem) clamp(1.1rem,3.4vw,2.75rem) clamp(2.25rem,4vw,3.5rem);
  overflow:hidden;
  isolation:isolate;
}

/* subtle warm glow + faint grain — never a flat void */
.pstage-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.pstage-atmos__glow{
  position:absolute;top:-18%;left:50%;transform:translateX(-50%);
  width:min(1100px,120%);height:60%;
  background:radial-gradient(closest-side,rgba(232,163,61,.05),rgba(232,163,61,0) 72%);
}
.pstage-atmos__grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .6px,transparent .6px);
  background-size:3px 3px;
}
.pstage-scope > *:not(.pstage-atmos){position:relative;z-index:1}

/* ---------------------------------------------------------------
   A. Intro
   --------------------------------------------------------------- */
.pstage-intro{max-width:52rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.pstage-eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:.85rem;
}
.pstage-h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,1.35rem + 2.6vw,3.1rem);line-height:1.04;letter-spacing:.002em;
  color:var(--ink);margin:0 0 .85rem;
}
.pstage-sub{
  font-family:var(--font-ui);font-size:clamp(.95rem,.86rem + .4vw,1.08rem);
  line-height:1.6;color:var(--ink-muted);margin:0;max-width:44rem;
}

/* ---------------------------------------------------------------
   B. Controls — delatnost chip + NIVO segmented control
   --------------------------------------------------------------- */
.pstage-controls{margin-bottom:clamp(1.75rem,3.2vw,2.5rem)}
.pstage-delatnost{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.pstage-delatnost__label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
}
.pstage-delatnost__chip{
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.03em;
  color:var(--ink);background:var(--stage-panel);border:1px solid var(--stage-line-soft);
  border-radius:999px;padding:.4rem .95rem;
}

.pstage-nivo-label{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .6rem;
}
.pstage-segmented{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  max-width:100%;
}
.pstage-seg{
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  min-height:64px;padding:.85rem 1.1rem;
  background:var(--stage-panel);border:1px solid var(--stage-line-soft);border-radius:var(--radius);
  color:var(--ink-muted);cursor:pointer;text-align:left;
  transition:background .2s var(--stage-ease),border-color .2s var(--stage-ease),
             color .2s var(--stage-ease),transform .15s var(--stage-ease);
}
.pstage-seg:hover{border-color:var(--stage-line);color:var(--ink)}
.pstage-seg:active{transform:scale(.99)}
.pstage-seg__name{
  font-family:var(--font-ui);font-weight:600;font-size:.86rem;letter-spacing:.01em;
  text-transform:uppercase;
}
.pstage-seg__price{
  font-family:var(--font-mono);font-size:1.05rem;font-weight:700;letter-spacing:.01em;
}
.pstage-seg.is-active{
  background:var(--amber);border-color:var(--amber);color:#1a1109;
}
.pstage-seg.is-active .pstage-seg__name,
.pstage-seg.is-active .pstage-seg__price{color:#1a1109}
@media (min-width:640px){
  .pstage-seg{min-height:76px;padding:1.05rem 1.35rem;flex-direction:row;align-items:baseline;justify-content:space-between;gap:.75rem}
}
@media (max-width:639px){
  .pstage-segmented{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------
   C+D. Stage grid — demo (68-72%) + right rail (~380-440px)
   --------------------------------------------------------------- */
.pstage-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);
  gap:clamp(1.4rem,2.6vw,2.25rem);align-items:start;
}
@media (min-width:1240px){
  .pstage-grid{grid-template-columns:minmax(0,1fr) 420px}
}
@media (max-width:980px){
  .pstage-grid{grid-template-columns:1fr}
}

/* ---- demo column -------------------------------------------------- */
.pstage-demo{min-width:0}
.pstage-browser{
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--stage-panel-2),var(--stage-panel));
  border:1px solid var(--stage-line-soft);box-shadow:var(--shadow-stage);
  transition:opacity .16s var(--stage-ease);
}
.pstage-browser__chrome{
  display:flex;align-items:center;gap:.9rem;padding:.65rem .9rem;
  border-bottom:1px solid var(--stage-line-soft);background:rgba(0,0,0,.16);
}
.pstage-browser__dots{display:flex;gap:.4rem;flex:none}
.pstage-browser__dots span{width:8px;height:8px;border-radius:50%;background:rgba(244,239,232,.16)}
.pstage-browser__url{
  flex:1 1 auto;display:flex;justify-content:center;min-width:0;
}
.pstage-browser__url span{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-faint);
  background:rgba(0,0,0,.22);border:1px solid var(--stage-line-soft);border-radius:999px;
  padding:.28rem .9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pstage-browser__body{position:relative;background:var(--stage-bg-2)}
.pstage-iframe{
  display:block;width:100%;border:0;background:var(--stage-bg-2, #17120e);
  height:clamp(600px,60vh,760px);
}
@media (max-width:720px){
  .pstage-iframe{height:clamp(480px,78vh,640px)}
}

.pstage-viewbtns{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem;
}
.pstage-viewbtn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-muted);background:var(--stage-panel);border:1px solid var(--stage-line-soft);
  border-radius:999px;padding:.5rem .9rem;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.pstage-viewbtn svg{width:14px;height:14px;flex:none}
.pstage-viewbtn:hover{color:var(--ink);border-color:var(--amber)}
.pstage-viewbtn.is-active{color:#1a1109;background:var(--amber);border-color:var(--amber)}

/* ---- right rail ------------------------------------------------- */
.pstage-rail{
  min-width:0;display:flex;flex-direction:column;gap:1.1rem;
  position:relative;
}
@media (min-width:981px){
  .pstage-rail{position:sticky;top:1.5rem}
}
.pstage-card{
  background:var(--stage-panel);border:1px solid var(--stage-line-soft);border-radius:var(--radius-lg);
  padding:clamp(1.15rem,2vw,1.5rem);
  transition:opacity .16s var(--stage-ease);
}
.pstage-rail__heading{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.01em;color:var(--ink);margin:0 0 .95rem;
}
.pstage-highlights{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.pstage-highlights li{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-ui);font-size:.86rem;color:var(--ink-muted);
  padding:.55rem .7rem;border:1px solid var(--stage-line-soft);border-radius:10px;
  background:rgba(255,255,255,.015);
}
.pstage-highlights li::before{
  content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber);
}
.pstage-highlights li.is-new{border-color:var(--stage-line);color:var(--ink)}
.pstage-tag-novo{
  flex:none;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#1a1109;background:var(--amber);border-radius:5px;
  padding:.18rem .4rem;margin-left:auto;
}

.pstage-compare-toggle{margin:0 0 1rem}
.pstage-compare-toggle summary{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--amber);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
}
.pstage-compare-toggle summary::-webkit-details-marker{display:none}
.pstage-compare-toggle summary::after{content:'▾';font-size:.65rem;transition:transform .2s}
.pstage-compare-toggle[open] summary::after{transform:rotate(180deg)}
.pstage-compare-toggle summary:hover{color:var(--ink)}
.pstage-compare-full{
  list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;
}
.pstage-compare-full li{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-ui);font-size:.82rem;color:var(--ink-muted);
}
.pstage-compare-full li::before{content:'—';color:var(--ink-faint);flex:none}
.pstage-compare-rows{
  list-style:none;margin:1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--stage-line-soft);
  display:flex;flex-direction:column;gap:.5rem;
}
.pstage-compare-rows li{display:flex;justify-content:space-between;gap:.75rem;font-size:.8rem}
.pstage-compare-rows dt{
  font-family:var(--font-mono);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;font-size:.68rem;
  flex:0 0 auto;
}
.pstage-compare-rows dd{margin:0;color:var(--ink-muted);text-align:right}

.pstage-price-line{
  font-family:var(--font-ui);font-size:.86rem;line-height:1.55;color:var(--ink-muted);
  padding-top:1rem;border-top:1px solid var(--stage-line-soft);margin:0;
}
.pstage-price-line strong{
  font-family:var(--font-mono);color:var(--amber);font-weight:700;
}

/* ---- Google/Maps card (800 & premium only) ------------------------ */
.pstage-google{
  background:var(--stage-panel);border:1px solid var(--google-slate-soft);border-radius:var(--radius-lg);
  padding:clamp(1.15rem,2vw,1.5rem);
  transition:opacity .16s var(--stage-ease);
}
.pstage-google[hidden]{display:none}
.pstage-google__badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--google-slate);margin-bottom:.85rem;
}
.pstage-google__badge svg{width:13px;height:13px}
.pstage-google__name{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.02rem;
  color:var(--ink);margin:0 0 .2rem;
}
.pstage-google__demotag{
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink);background:rgba(255,255,255,.08);border-radius:5px;padding:.16rem .4rem;
}
.pstage-google__category{font-family:var(--font-ui);font-size:.82rem;color:var(--ink-muted);margin:0 0 .9rem}
.pstage-google__meta{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.45rem}
.pstage-google__meta li{
  display:flex;align-items:flex-start;gap:.55rem;
  font-family:var(--font-ui);font-size:.82rem;color:var(--ink-muted);
}
.pstage-google__meta svg{flex:none;width:15px;height:15px;color:var(--google-slate);margin-top:.1rem}
.pstage-google__meta a{color:var(--ink);transition:color .2s}
.pstage-google__meta a:hover{color:var(--google-slate)}
.pstage-google__services{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem}
.pstage-google__services span{
  font-family:var(--font-mono);font-size:.68rem;color:var(--ink-muted);
  background:var(--google-slate-soft);border:1px solid rgba(91,139,176,.25);border-radius:999px;
  padding:.25rem .65rem;
}
.pstage-google__photos{display:flex;gap:.5rem;margin:0 0 1rem}
.pstage-google__photos span{
  flex:1 1 0;aspect-ratio:1/1;border-radius:8px;
  background:linear-gradient(150deg,var(--google-slate-soft),rgba(255,255,255,.02));
  border:1px solid rgba(91,139,176,.2);
}
.pstage-google__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.pstage-google__actions a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:999px;border:1px solid rgba(91,139,176,.3);
  color:var(--ink);transition:background .2s,border-color .2s;
}
.pstage-google__actions a:first-child{background:var(--google-slate);border-color:var(--google-slate);color:#0e161c}
.pstage-google__actions a:not(:first-child):hover{border-color:var(--google-slate);color:var(--google-slate)}
.pstage-google__caption{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.55;color:var(--ink-faint);margin:0;
  padding-top:.9rem;border-top:1px solid rgba(91,139,176,.16);
}

/* slide-in entrance for the Google card when it newly appears — a
   dedicated, longer transition that overrides the shorter cross-fade
   transition above while these classes are present. */
.pstage-google.pstage-enter,
.pstage-google.pstage-enter-active{
  transition:opacity .32s var(--stage-ease),transform .32s var(--stage-ease);
}
.pstage-google.pstage-enter{opacity:0;transform:translateX(18px)}
.pstage-google.pstage-enter-active{opacity:1;transform:translateX(0)}

/* amber "DODATO NA OVOM NIVOU" chip */
.pstage-added-chip{
  position:absolute;top:-.6rem;right:.9rem;z-index:5;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#1a1109;background:var(--amber);border-radius:999px;padding:.32rem .7rem;
  box-shadow:0 8px 20px -8px rgba(232,163,61,.7);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .28s var(--stage-ease),transform .28s var(--stage-ease);
}
.pstage-added-chip.is-visible{opacity:1;transform:translateY(0)}

/* ---------------------------------------------------------------
   Coordinated level-change transition (cross-fade demo + rail)
   --------------------------------------------------------------- */
.pstage-scope.pstage--changing .pstage-browser,
.pstage-scope.pstage--changing .pstage-card,
.pstage-scope.pstage--changing .pstage-google{opacity:.35}

/* ---------------------------------------------------------------
   F. Bottom flow
   --------------------------------------------------------------- */
.pstage-flow{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--stage-line-soft);border-radius:var(--radius-lg);overflow:hidden;
}
.pstage-flowstep{
  position:relative;display:flex;flex-direction:column;gap:.5rem;text-align:left;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,2.4vw,1.75rem);
  background:var(--stage-panel);color:var(--ink-muted);cursor:pointer;border:0;
  border-right:1px solid var(--stage-line-soft);
  transition:background .2s var(--stage-ease),color .2s var(--stage-ease);
}
.pstage-flowstep:last-child{border-right:0}
.pstage-flowstep:hover{background:var(--stage-panel-2);color:var(--ink)}
.pstage-flowstep.is-active{background:var(--amber-soft);color:var(--ink)}
.pstage-flowstep.is-active .pstage-flowstep__price{color:var(--amber)}
.pstage-flowstep__arrow{
  position:absolute;top:50%;right:-.65rem;transform:translateY(-50%);z-index:2;
  width:1.3rem;height:1.3rem;display:none;align-items:center;justify-content:center;
  color:var(--ink-faint);background:var(--stage-bg);border-radius:50%;
}
@media (min-width:900px){
  .pstage-flowstep:not(:last-child) .pstage-flowstep__arrow{display:flex}
}
.pstage-flowstep__price{
  font-family:var(--font-mono);font-weight:700;font-size:1.02rem;letter-spacing:.01em;color:var(--ink);
}
.pstage-flowstep__title{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:.92rem;
  letter-spacing:.01em;color:var(--ink);
}
.pstage-flowstep__desc{font-family:var(--font-ui);font-size:.82rem;line-height:1.5}
.pstage-flowstep__glyphs{display:flex;gap:.5rem;margin-top:.15rem}
.pstage-flowstep__glyphs svg{width:16px;height:16px;color:var(--ink-faint)}
.pstage-flowstep.is-active .pstage-flowstep__glyphs svg{color:var(--amber)}
@media (max-width:760px){
  .pstage-flow{grid-template-columns:1fr}
  .pstage-flowstep{border-right:0;border-bottom:1px solid var(--stage-line-soft)}
  .pstage-flowstep:last-child{border-bottom:0}
}

/* ---------------------------------------------------------------
   G. CTA band
   --------------------------------------------------------------- */
.pstage-cta{
  margin-top:clamp(2rem,3.6vw,2.75rem);display:flex;flex-direction:column;align-items:center;gap:1rem;
  text-align:center;
}
.pstage-cta__contact{
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;
}
.pstage-cta__contact a{color:var(--ink-muted);transition:color .2s}
.pstage-cta__contact a:hover{color:var(--amber)}
.pstage-cta__contact span[aria-hidden]{opacity:.4}

/* ---------------------------------------------------------------
   Fullscreen overlay (reused mechanism from R14 primeri-showroom.js
   — focus trap, Esc, scroll lock, focus return; only the panel it
   enlarges changed from a 3D card to the single big demo iframe).
   --------------------------------------------------------------- */
.pstage-overlay[hidden]{display:none}
.pstage-overlay__backdrop{position:fixed;inset:0;z-index:9000;background:rgba(8,7,6,.9)}
.pstage-overlay__bar{
  position:fixed;top:0;left:0;right:0;height:60px;z-index:9002;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1rem;
  background:var(--stage-bg-2,#17120e);border-bottom:1px solid var(--stage-line-soft,rgba(255,255,255,.08));
  font-family:var(--font-mono,'JetBrains Mono',monospace);
}
.pstage-overlay__back{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:inherit;font-size:.76rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-muted,#b7ac9e);background:transparent;border:1px solid var(--stage-line-soft,rgba(255,255,255,.08));
  border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:color .2s,border-color .2s;
}
.pstage-overlay__back:hover{color:var(--amber,#e8a33d);border-color:var(--amber,#e8a33d)}
.pstage-overlay__close{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink,#f4efe8);background:var(--stage-panel,#1a1512);border:1px solid var(--stage-line-soft,rgba(255,255,255,.08));
  cursor:pointer;transition:color .2s,border-color .2s,background .2s;
}
.pstage-overlay__close svg{width:18px;height:18px}
.pstage-overlay__close:hover{color:var(--amber,#e8a33d);border-color:var(--amber,#e8a33d)}
.pstage-overlay__stage{
  position:fixed;top:60px;left:0;right:0;bottom:0;z-index:9001;
  display:flex;align-items:center;justify-content:center;padding:clamp(.6rem,2.5vw,1.5rem);
  background:var(--stage-bg,#100d0a);
}
.pstage-overlay__stage .pstage-iframe{
  width:min(96vw,1500px);height:min(92vh,980px);border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}
html.pstage-scroll-lock,body.pstage-scroll-lock{overflow:hidden!important;height:100%}

/* ---------------------------------------------------------------
   Hub-level chrome (DEMO badge, no-JS fallback) — kept from R14
   --------------------------------------------------------------- */
.demo-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin-bottom:1.4rem;padding:.6rem .9rem;
  border:1px solid var(--line-2);border-radius:10px;
  background:rgba(247,168,27,.07);
  max-width:100%;
}
.demo-pill{
  flex:none;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent);
  padding:.32rem .6rem;border-radius:5px;white-space:nowrap;
}
.demo-banner p{margin:0;color:var(--text-2);font-size:.86rem;line-height:1.5}

/* R24D — REZERVACIJA PROSTORA PRE MONTAŽE (CLS)
   Kontejner je stajao na min-height:1rem dok ga primeri-showroom.js ne napuni,
   pa je sadržaj „upadao" i pravio CLS 0.545 na /primeri/ (mereno na 375/390/412).
   Na /sajt-za-majstore/ isti mount nije pravio CLS samo zato što je duboko ispod
   preloma, pa pomeraj nije bio u viewportu — uzrok je bio isti.

   Vrednosti su IZMERENE visine montiranog showrooma, umanjene ~2% da rezervacija
   nikad ne ostavi prazan prostor ispod sadržaja:
     375px → 2652 · 390px → 2645 · 1440px → 1567

   Napomena: `:empty` se ovde NIKAD ne poklapa — <noscript> je dete ovog diva,
   pa kontejner nije prazan ni pre montaže. Zato rezervacija ide na sam element. */
#primeri-showroom{position:relative;min-height:2600px;max-width:100%;overflow-x:hidden}
@media (min-width:861px){#primeri-showroom{min-height:1520px}}

/* ---- page-hero modifier: breadcrumb + demo banner only, no big H1 ------ */
.page-hero--tight{padding-bottom:.5rem}

/* ---- no-JS fallback ---------------------------------------------------- */
.primeri-noscript{
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);padding:clamp(1.4rem,3vw,2.2rem);
}
.primeri-noscript__badge-line{margin:0 0 1rem}
.primeri-noscript h1{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;line-height:1;
  font-size:clamp(1.8rem,4vw,2.6rem);color:var(--text);margin:0 0 .9rem;max-width:18ch;
}
.primeri-noscript__intro{color:var(--text-2);font-size:.95rem;line-height:1.65;margin:0 0 1.4rem;max-width:42rem}
.primeri-noscript__list{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr);
}
.primeri-noscript__list li{border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;background:var(--panel-2)}
.primeri-noscript__list h3{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:1.05rem;color:var(--text);margin:0 0 .5rem;
}
.primeri-noscript__list p{margin:0;color:var(--text-2);font-size:.86rem;line-height:1.55}
.primeri-noscript__compare{margin:0 0 1.4rem;padding:0;list-style:none}
.primeri-noscript__compare li{
  display:flex;justify-content:space-between;gap:.75rem;padding:.5rem 0;
  border-top:1px solid var(--line);font-size:.85rem;color:var(--text-2);
}
.primeri-noscript__compare li:first-child{border-top:0}
.primeri-noscript__compare strong{color:var(--text)}
.primeri-noscript__cta{margin:0;color:var(--text-2);font-size:.9rem}
.primeri-noscript__cta a{color:var(--accent)}
.primeri-noscript__cta a:hover{text-decoration:underline}
@media (max-width:820px){.primeri-noscript__list{grid-template-columns:1fr}}

/* ---- Level comparison cards (crawlable copy section) -------------------- */
.level-card{padding:1.6rem 1.5rem}
.level-price{
  display:inline-block;font-family:var(--font-mono);font-size:.78rem;
  font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:.7rem;
}
.level-card h3{margin-bottom:.4rem}
.level-card > p{color:var(--text-2);font-size:.9rem;margin-bottom:1rem}
.level-note{margin-top:1.6rem;color:var(--muted);font-size:.84rem;line-height:1.6;max-width:44rem}

/* ---- Contact line in closing CTA --------------------------------------- */
.primeri-contact-line{
  margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem;
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-2);
  align-items:center;justify-content:center;
}
.primeri-contact-line a{color:var(--text-2);transition:color .2s}
.primeri-contact-line a:hover{color:var(--accent)}
.primeri-contact-line span[aria-hidden]{opacity:.4}

/* ---- Overflow safety ----------------------------------------------------- */
.primeri-noscript,#primeri-showroom,.pstage-scope{max-width:100%;overflow-x:hidden}

/* ---------------------------------------------------------------
   Reduced motion — instant everywhere inside the stage
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pstage-scope, .pstage-scope *,
  .pstage-overlay, .pstage-overlay *{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .pstage-google.pstage-enter{opacity:1;transform:none}
}

/* ---------------------------------------------------------------
   Keyboard focus
   --------------------------------------------------------------- */
.pstage-scope :focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}