/* Paketi v2: prodajna stranica s interaktivnim konfiguratorom projekta. */
.ws8-page .site-main,.ws8-page .page-shell { width:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.ws8-page .entry-content { font-size:1rem; line-height:1.6; }
.ws8 { --ink:#08273c; --navy:#06263a; --deep:#041b2b; --sea:#14556d; --gold:#efc653; --paper:#f7f7f3; --pale:#edf4f2; --line:rgba(8,39,60,.16); --muted:#526c7b; box-sizing:border-box; color:var(--ink); font-size:1rem; line-height:1.55; }
.ws8 *, .ws8 *::before, .ws8 *::after { box-sizing:border-box; }
.ws8-wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.ws8 h1,.ws8 h2,.ws8 h3,.ws8 h4,.ws8 p { margin:0; }
.ws8 h1,.ws8 h2,.ws8 h3,.ws8 h4 { color:inherit; font-weight:850; letter-spacing:0; }
.ws8 h1 { max-width:720px; font-size:clamp(2.85rem,5.2vw,5.5rem); line-height:.97; }
.ws8 h2 { max-width:825px; font-size:clamp(2rem,3.7vw,3.75rem); line-height:1.04; }
.ws8 h3 { font-size:1.25rem; line-height:1.17; }
.ws8-kicker { display:inline-flex; margin:0 0 17px; color:#97700d; font-size:.76rem; font-weight:900; letter-spacing:.07em; line-height:1.1; text-transform:uppercase; }
.ws8-kicker--light { color:#ffe08b; }
.ws8-button { display:inline-flex; align-items:center; justify-content:center; min-height:53px; padding:0 24px; border:1px solid transparent; border-radius:4px; font:inherit; font-weight:900; line-height:1.1; text-align:center; text-decoration:none; white-space:normal; cursor:pointer; transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease; }
.ws8-button:hover,.ws8-button:focus { transform:translateY(-2px); text-decoration:none; }
.ws8-button--gold { color:#082131; background:var(--gold); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.ws8-button--clear { color:#fff; border-color:rgba(255,255,255,.58); background:transparent; }
.ws8-button--navy { color:#fff; background:var(--navy); }

.ws8-hero { position:relative; overflow:hidden; padding:clamp(72px,8vw,112px) 0 clamp(70px,8vw,102px); color:#fff; background:var(--deep); }
.ws8-hero::before { position:absolute; inset:0; content:""; background:linear-gradient(105deg,rgba(1,21,34,.25),rgba(18,79,103,.34)); }
.ws8-hero__grid { position:relative; display:grid; grid-template-columns:minmax(0,.56fr) minmax(380px,.44fr); gap:clamp(36px,6vw,90px); align-items:center; }
.ws8-hero__lead { max-width:635px; margin-top:22px!important; color:rgba(255,255,255,.86); font-size:clamp(1.04rem,1.45vw,1.2rem); }
.ws8-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.ws8-hero__proof { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.ws8-hero__proof span { padding:8px 11px; border:1px solid rgba(255,224,139,.34); color:#fff3c0; font-size:.83rem; font-weight:800; }
.ws8-stage { position:relative; min-height:374px; }
.ws8-stage::before { position:absolute; top:8%; right:0; width:81%; height:77%; content:""; border:1px solid rgba(255,224,139,.37); }
.ws8-stage figure { position:absolute; display:block; overflow:hidden; margin:0; border:7px solid #fff; background:#fff; box-shadow:0 23px 44px rgba(0,0,0,.3); }
.ws8-stage img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.ws8-stage__main { z-index:2; top:42px; right:0; width:78%; height:272px; transform:rotate(-2.4deg); }
.ws8-stage__front { z-index:3; bottom:0; left:0; width:48%; height:153px; transform:rotate(2.8deg); }
.ws8-stage__tag { position:absolute; z-index:4; top:0; left:12%; padding:8px 11px; color:#082131; background:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 10px 20px rgba(0,0,0,.18); }

.ws8-builder-section { padding:clamp(66px,8vw,104px) 0; background:var(--paper); }
.ws8-heading { margin-bottom:36px; }
.ws8-heading--split { display:grid; grid-template-columns:minmax(0,.67fr) minmax(260px,.33fr); gap:38px; align-items:end; max-width:none; }
.ws8-heading--split>p { max-width:405px; color:var(--muted); font-size:1.06rem; }
.ws8-builder { display:grid; grid-template-columns:minmax(0,.68fr) minmax(305px,.32fr); gap:22px; align-items:start; }
.ws8-config { min-width:0; }
.ws8-panel { padding:26px; border:1px solid var(--line); background:#fff; box-shadow:0 14px 32px rgba(8,39,60,.06); }
.ws8-panel+.ws8-panel { margin-top:16px; }
.ws8-panel__head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:20px; }
.ws8-panel__head h3 { font-size:1.18rem; }
.ws8-panel__head span { color:#98720d; font-size:.76rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.ws8-package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ws8-package-choice { position:relative; display:block; cursor:pointer; }
.ws8-package-choice input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.ws8-package-choice__card { display:flex; min-height:165px; flex-direction:column; padding:19px; border:1px solid var(--line); background:#fff; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.ws8-package-choice:hover .ws8-package-choice__card { border-color:#cba73c; transform:translateY(-2px); }
.ws8-package-choice input:checked + .ws8-package-choice__card { color:#fff; border-color:var(--navy); background:var(--navy); box-shadow:0 13px 26px rgba(4,27,43,.17); }
.ws8-package-choice__label { color:#99720d; font-size:.73rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.ws8-package-choice input:checked + .ws8-package-choice__card .ws8-package-choice__label { color:#ffe08b; }
.ws8-package-choice__price { margin-top:9px; font-size:1.65rem; font-weight:900; line-height:1; }
.ws8-package-choice__text { margin-top:auto!important; color:var(--muted); font-size:.88rem; line-height:1.38; }
.ws8-package-choice input:checked + .ws8-package-choice__card .ws8-package-choice__text { color:rgba(255,255,255,.78); }
.ws8-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.ws8-field { display:grid; gap:7px; }
.ws8-field label,.ws8-toggle span { color:#304c5e; font-size:.86rem; font-weight:850; }
.ws8-field select,.ws8-field input { width:100%; min-height:48px; padding:0 12px; border:1px solid rgba(8,39,60,.25); border-radius:3px; color:var(--ink); background:#fff; font:inherit; }
.ws8-toggle { display:flex; gap:11px; align-items:center; min-height:48px; margin-top:16px; padding:12px 13px; border:1px solid rgba(8,39,60,.15); background:#f6f9f8; cursor:pointer; }
.ws8-toggle input { width:18px; height:18px; margin:0; accent-color:#0a415a; }
.ws8-toggle small { display:block; margin-top:2px; color:var(--muted); font-size:.77rem; font-weight:600; }
.ws8-addon-tools { display:flex; gap:10px; margin-bottom:13px; }
.ws8-addon-tools input { flex:1; min-width:0; min-height:47px; padding:0 13px; border:1px solid rgba(8,39,60,.25); border-radius:3px; color:var(--ink); background:#fff; font:inherit; }
.ws8-addon-groups { display:grid; gap:10px; }
.ws8-addon-group { border:1px solid rgba(8,39,60,.15); background:#fff; }
.ws8-addon-group[hidden] { display:none; }
.ws8-addon-group summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 16px; color:var(--ink); font-weight:900; cursor:pointer; }
.ws8-addon-group summary::marker { color:#a37712; }
.ws8-addon-group summary span { color:#8e6a10; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; }
.ws8-addon-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(8,39,60,.13); }
.ws8-addon { display:flex; gap:11px; min-height:90px; padding:15px 14px; border-bottom:1px solid rgba(8,39,60,.12); cursor:pointer; }
.ws8-addon:nth-child(odd) { border-right:1px solid rgba(8,39,60,.12); }
.ws8-addon input { flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:#0a415a; }
.ws8-addon strong { display:block; color:#173d52; font-size:.9rem; line-height:1.32; }
.ws8-addon small { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; line-height:1.35; }
.ws8-addon em { display:block; margin-top:5px; color:#99720d; font-size:.82rem; font-style:normal; font-weight:900; }
.ws8-empty-search { display:none; padding:17px; color:var(--muted); border:1px dashed rgba(8,39,60,.25); text-align:center; }
.ws8-empty-search.is-visible { display:block; }

.ws8-summary { position:sticky; top:102px; overflow:hidden; color:#fff; background:var(--navy); box-shadow:0 20px 42px rgba(4,27,43,.19); }
.ws8-summary__top { padding:24px 24px 19px; border-bottom:1px solid rgba(255,255,255,.2); }
.ws8-summary__label { color:#ffe08b; font-size:.75rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.ws8-summary h3 { margin-top:8px; font-size:1.55rem; }
.ws8-summary__base { margin-top:6px; color:rgba(255,255,255,.74); font-size:.91rem; }
.ws8-summary__body { padding:20px 24px 24px; }
.ws8-summary__rows { display:grid; gap:10px; max-height:230px; overflow:auto; padding-right:4px; }
.ws8-summary__row { display:flex; justify-content:space-between; gap:12px; color:rgba(255,255,255,.82); font-size:.86rem; line-height:1.35; }
.ws8-summary__row span:last-child { flex:0 0 auto; color:#ffe08b; font-weight:850; white-space:nowrap; }
.ws8-summary__total { margin-top:21px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22); }
.ws8-summary__total span { display:block; color:rgba(255,255,255,.7); font-size:.78rem; font-weight:800; }
.ws8-summary__total strong { display:block; margin-top:4px; color:#ffe08b; font-size:2.65rem; line-height:1; }
.ws8-summary__recurring { margin-top:12px; color:rgba(255,255,255,.78); font-size:.86rem; }
.ws8-summary__advance { margin-top:16px; padding:11px 12px; color:#fff1bc; border:1px solid rgba(255,224,139,.35); font-size:.83rem; line-height:1.38; }
.ws8-summary__actions { display:grid; gap:9px; margin-top:18px; }
.ws8-summary .ws8-button { width:100%; }
.ws8-copy-status { min-height:19px; margin-top:10px!important; color:rgba(255,255,255,.72); font-size:.78rem; text-align:center; }

.ws8-value { padding:clamp(65px,7vw,96px) 0; background:#fff; }
.ws8-value__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.ws8-value__item { min-height:232px; padding:29px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.ws8-value__item span { display:flex; align-items:center; justify-content:center; width:43px; height:43px; margin-bottom:25px; border:1px solid rgba(163,119,18,.6); color:#9b720d; font-weight:900; }
.ws8-value__item p { margin-top:11px; color:var(--muted); }

.ws8-contact { padding:clamp(70px,8vw,104px) 0; color:#fff; background:#124b67; }
.ws8-contact__grid { display:grid; grid-template-columns:minmax(0,.67fr) minmax(280px,.33fr); gap:clamp(42px,7vw,100px); align-items:center; }
.ws8-contact__copy>p:not(.ws8-kicker) { max-width:645px; margin-top:19px; color:rgba(255,255,255,.82); font-size:1.06rem; }
.ws8-contact__card { padding:28px; border:1px solid rgba(255,255,255,.35); }
.ws8-contact__card span { display:block; color:#ffe08b; font-size:.75rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.ws8-contact__card a:not(.ws8-button) { display:block; margin-top:10px; color:#fff; font-size:1.05rem; font-weight:850; text-decoration:none; }
.ws8-contact__card .ws8-button { display:flex; width:100%; margin-top:24px; }

@media (max-width:980px) {
 .ws8-hero__grid,.ws8-builder,.ws8-contact__grid { grid-template-columns:1fr; }
 .ws8-stage { width:min(600px,100%); margin-inline:auto; }
 .ws8-summary { position:relative; top:auto; }
 .ws8-heading--split { grid-template-columns:1fr; }
 .ws8-value__grid { grid-template-columns:1fr; }
 .ws8-value__item { min-height:0; }
}
@media (max-width:640px) {
 .ws8-wrap { width:calc(100% - 40px); }
 .ws8 h1 { font-size:clamp(2.05rem,9vw,2.65rem); line-height:1.02; }
 .ws8 h2 { font-size:clamp(1.88rem,8vw,2.45rem); }
 .ws8-hero { padding:58px 0 63px; }
 .ws8-hero__lead { font-size:1rem; }
 .ws8-actions { display:grid; grid-template-columns:1fr; }
 .ws8-button { width:100%; }
 .ws8-hero__proof { display:grid; gap:8px; }
 .ws8-stage { min-height:288px; margin-top:6px; }
 .ws8-stage figure { border-width:5px; }
 .ws8-stage__main { top:35px; height:205px; }
 .ws8-stage__front { height:123px; }
 .ws8-stage__tag { left:10%; padding:7px 9px; font-size:.65rem; }
 .ws8-builder-section,.ws8-value,.ws8-contact { padding:56px 0; }
 .ws8-heading { margin-bottom:28px; }
 .ws8-package-grid,.ws8-field-grid,.ws8-addon-list { grid-template-columns:1fr; }
 .ws8-panel { padding:20px; }
 .ws8-panel__head { display:block; }
 .ws8-panel__head span { display:block; margin-top:5px; }
 .ws8-package-choice__card { min-height:142px; }
 .ws8-addon { min-height:0; }
 .ws8-addon:nth-child(odd) { border-right:0; }
 .ws8-summary__top,.ws8-summary__body { padding-inline:20px; }
 .ws8-summary__total strong { font-size:2.32rem; }
 .ws8-contact__card { padding:23px; }
}