/* Pristajalna stran /izdelava-spletne-trgovine-s-ceno/ (pagecss = storitev lpsc lpst).
   Naloži se ZA storitev.css (razredi .ss-*) in lpsc.css (čarovnik). Tu je samo to,
   česar tam ni: pas s številkami, kartice referenc, seznama »v ceni / doplačilo«,
   kartici nakup/najem s stroški ob začetku in mesečno, primer iz prakse in lepljiv
   poziv na mobilnem. Barve, pisave, gumbi in radiji so iz design.css. */

.lpst{background:var(--paper)}

/* ---------- 1 · naslov ---------- */
.lpst-hero > .ss-wrap{padding-bottom:44px}
/* Naslov in uvod tečeta čez vso širino škatle (Aleš, 21. 9. 2026) — brez omejitve
   na 20ch/62ch, ki jo sicer dajeta .ss-hero-plosca h1 in .ss-lead. */
.lpst-hero h1,.lpst-hero .ss-lead{max-width:none}
.lpst-hero .ss-lead strong{color:var(--ink)}
.lpst .lpst-micro{font-size:13.5px;color:var(--muted);margin:14px 0 0}

/* ---------- test A/B (20. 10. 2026): cena pod naslovom, obrazec, zložen čarovnik ---------- */
.lpst-hero-kratek > .ss-wrap{padding-bottom:36px}
.lpst .lpst-cenovna{font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--ink);margin:14px 0 0;max-width:none}
.lpst-cenovna strong{white-space:nowrap}
.lpst-povpr{background:#eff6f6;border-top:1px solid var(--line);padding:clamp(28px,5vw,56px) 0}
.lpst-povpr .lpsc-obrazec{max-width:760px;margin:0 auto;padding:clamp(20px,3vw,32px);
  background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.lpst-povpr .lpsc-obrazec h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 18px}
.lpst .lpsc.lpst-zlozeno{padding:clamp(24px,4vw,40px) 0}
.lpst-prilagodi > summary{list-style:none;cursor:pointer;display:block;position:relative;
  padding:18px 56px 18px 22px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.lpst-prilagodi > summary::-webkit-details-marker{display:none}
.lpst-prilagodi > summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:28px;line-height:1;color:var(--teal)}
.lpst-prilagodi[open] > summary{margin-bottom:24px}
.lpst-prilagodi[open] > summary::after{content:"\2212"}
.lpst-prilagodi > summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.lpst-prilagodi > summary h2{display:inline;font-size:clamp(19px,2.2vw,24px);margin:0}
.lpst-prilagodi-pod{display:block;font-size:14.5px;color:var(--muted);margin-top:4px}
.lpsc-na-obrazec{margin:16px 0 0}

/* ---------- 2 · dokazi ---------- */
.lpst-dokazi{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lpst-stevilke{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 32px;margin:0;padding:26px 0}
.lpst-stevilke div{margin:0}
.lpst-stevilke dt{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.lpst-stevilke dd{margin:6px 0 0;font-size:14px;color:var(--muted)}

/* ---------- 3 · reference ---------- */
.lpst-ref{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.lpst-ref-kartica{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.lpst-ref-kartica:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,51,69,.12)}
.lpst-ref-kartica > a{display:block}
.lpst-ref-kartica img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);
  aspect-ratio:800/520;background:#f5f7f7}
.lpst-ref-telo{padding:18px 22px 22px}
.lpst-ref-telo h3{font-size:20px;margin:0 0 8px}
.lpst-ref-telo h3 a{color:var(--ink);text-decoration:none}
.lpst-ref-telo h3 a:hover,.lpst-ref-telo h3 a:focus-visible{color:var(--teal);text-decoration:underline}
.lpst .lpst-ref-telo p{margin:0;font-size:15px;color:var(--muted)}
.lpst .lpst-sredina{justify-content:center;align-items:center;margin:34px 0 0}
.lpst-vse{font-size:15px}

/* ---------- 4 · kaj dobite ---------- */
.lpst-kljuke,.lpst-plus{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lpst-kljuke li,.lpst-plus li{position:relative;padding-left:26px;font-size:15.5px;color:var(--muted);line-height:1.55}
.lpst-kljuke li strong,.lpst-plus li strong{color:var(--ink)}
.lpst-kljuke li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
.lpst-plus li::before{content:"+";position:absolute;left:2px;top:-2px;color:#457681;font-weight:700;font-size:19px}
.lpst-kljuke-tesno{gap:6px}
.lpst-kljuke-tesno li{font-size:15px}
.lpst-dobite .ss-paket h3{margin-bottom:18px}

/* ---------- 6 · cena in čarovnik ----------
   .lpsc iz lpsc.css je narejen za celo stran (min-height:100vh); tu je razdelek. */
.lpst .lpsc{min-height:0;padding:80px 0;background:#eff6f6;border-top:1px solid var(--line)}
.lpst-cena-glava{text-align:center;margin-bottom:30px}
.lpst-cena-glava h2{margin-left:auto;margin-right:auto}
.lpst-cena-glava .ss-lead{margin:0 auto}
.lpst-cena-glava .ss-lead[hidden]{display:none}
.lpst-vstop{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lpst-vstop[hidden]{display:none}
.lpst-pot{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.lpst-pot .ss-oznaka{margin-bottom:8px}
.lpst .lpst-pot-cena{font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.1;
  color:var(--ink);margin:0 0 10px}
.lpst-pot-cena span{font-size:.45em;font-weight:600;letter-spacing:0;color:var(--muted)}
.lpst .lpst-pot-pod{font-size:14.5px;color:var(--muted);margin:0 0 16px}
.lpst-pot-pod strong{color:var(--ink)}
.lpst-stroski{margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14px}
.lpst-stroski div{margin:0}
.lpst-stroski dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#457681}
.lpst-stroski dd{margin:2px 0 0;color:var(--ink);line-height:1.5}
.lpst-pot-gumb{margin-top:auto;width:100%}
.lpst .lpst-cena-op{max-width:none;text-align:center;margin:18px 0 26px}
.lpst .lpsc-caro{max-width:760px}
.lpst .lpsc-caro[hidden]{display:none}
.lpst .lpsc-obrazec h3{font-size:18px;margin:0 0 4px}

/* ---------- 7 · primer iz prakse ---------- */
.lpst-primer{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start;
  background:#e2edf1;border-radius:18px;padding:36px}
.lpst-primer-slika{margin:0}
.lpst-primer-slika img{width:100%;height:auto;border-radius:12px;border:1px solid #c9dbe0;
  aspect-ratio:800/520;background:#f5f7f7}
.lpst-primer-slika figcaption{font-size:13px;color:#3f5a6b;margin-top:8px}
.lpst-primer-slika a{color:#1c6c7c}
.lpst-primer-telo h3{margin-bottom:14px}
.lpst-primer-dl{margin:0 0 16px}
.lpst-primer-dl dt{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1c6c7c;margin:14px 0 4px}
.lpst-primer-dl dt:first-child{margin-top:0}
.lpst-primer-dl dd{margin:0;color:#2e4960}
.lpst-primer .lpst-kljuke li{color:#2e4960}
.lpst .lpst-primer-telo .ss-note{margin:0}

/* ---------- 12 · lepljiv poziv na mobilnem ----------
   Ista geometrija kot .mobile-bar (pages.css): pasica o piškotkih na mobilnem stoji
   76 px nad dnom, torej nad tem gumbom, in se ne prekrivata. Skrije se, ko je
   razdelek s ceno na zaslonu (assets/js/lpst.js). Brez JS ga sploh ni. */
.lpst-lepljiv{display:none}
@media(max-width:800px){
  .lpst-lepljiv{display:inline-flex;position:fixed;left:14px;right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;min-height:48px;
    box-shadow:0 12px 30px rgba(11,51,69,.2);
    opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s ease}
  .lpst-lepljiv.show{opacity:1;visibility:visible;transform:none}
  .lpst .ln-pravno{padding-bottom:calc(26px + 62px + env(safe-area-inset-bottom,0px))}
}

/* ---------- odzivnost ---------- */
@media(max-width:900px){
  .lpst-stevilke{grid-template-columns:1fr 1fr}
  .lpst-primer{grid-template-columns:1fr;gap:22px;padding:26px}
}
@media(max-width:760px){
  .lpst-vstop{grid-template-columns:1fr}
  .lpst .lpsc{padding:52px 0}
  .lpst-pot{padding:22px}
  .lpst-hero > .ss-wrap{padding-bottom:32px}
}
/* Pravilo strani: vrstica s karticami na mobilnem drsi vodoravno (kot .ss-grid). */
@media(max-width:560px){
  .lpst-ref{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);position:relative;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .lpst-ref::-webkit-scrollbar{display:none}
  .lpst-ref > *{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gutter);position:relative}
  .lpst-stevilke{gap:14px 18px;padding:22px 0}
  .lpst-stevilke dt{font-size:24px}
  .lpst .lpst-sredina{flex-direction:column}
  .lpst .lpst-sredina .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .lpst-ref-kartica,.lpst-lepljiv{transition:none}
  .lpst-ref-kartica:hover{transform:none}
}