/* ============================================================
   Konfigurator naljepnica — stilovi (uz styles.css i moto.css)
   ============================================================ */

.stk-hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem)}

/* ---------- Pregled ---------- */
.stk-view{position:relative;aspect-ratio:4/3;max-height:calc(100vh - 230px);width:100%;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:grid;place-items:center;transition:background .25s,border-color .2s}
.stk-view[data-bg="dark"]{background:radial-gradient(120% 90% at 50% 0%,#2a221d,#14100e 70%)}
.stk-view[data-bg="light"]{background:radial-gradient(120% 90% at 50% 0%,#f4efe7,#d9d2c6 75%)}
.stk-view[data-bg="check"]{background:repeating-conic-gradient(#3a332e 0 25%,#2a2420 0 50%) 0 0/22px 22px}
.stk-view.is-over{border-color:var(--clay);box-shadow:inset 0 0 0 2px var(--clay)}
.stk-art{position:relative;display:grid;margin-bottom:6%}
.stk-art canvas{grid-area:1/1;width:100%;height:100%;display:block}
.stk-art .stk-c{filter:drop-shadow(0 8px 16px rgba(0,0,0,.42)) drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.stk-view[data-bg="light"] .stk-art .stk-c{filter:drop-shadow(0 8px 16px rgba(60,40,20,.22)) drop-shadow(0 1px 2px rgba(60,40,20,.25))}
.stk-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bone-dim)}
.stk-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,13,11,.6);font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--bone)}
.stk-busy span{animation:stkPulse 1s ease-in-out infinite alternate}
@keyframes stkPulse{from{opacity:.45}to{opacity:1}}
.stk-dims{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;pointer-events:none}
.stk-dims b{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;background:rgba(16,13,11,.82);color:var(--bone);padding:5px 9px;border-radius:2px;font-weight:700}
.stk-dims .q{background:rgba(16,13,11,.82)}
.stk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.stk-bar .seg button{min-height:36px;padding:6px 12px;font-size:.62rem}

/* gumbi-čipovi */
.chipbtn{display:inline-flex;align-items:center;gap:8px;background:var(--ink-2);border:1px solid var(--line);color:var(--bone-dim);font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;min-height:36px;border-radius:30px;cursor:pointer;transition:.2s}
.chipbtn:hover{color:var(--bone);border-color:rgba(221,138,91,.6)}
.chipbtn[aria-pressed="true"]{color:var(--bone);border-color:var(--clay);box-shadow:inset 0 0 0 1px var(--clay)}
.chipbtn--cut i{width:16px;height:0;border-top:2px solid #ff2bd6}
.chipbtn--cut[aria-pressed="false"] i{border-top-style:dashed;opacity:.5}

/* ---------- Kvaliteta ---------- */
.q{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-style:normal;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.q::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.q--great,.q--good{color:#9fd4a8}
.q--ok{color:var(--clay)}
.q--low{color:#ff8a6b}
.fcard{margin-top:14px;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:14px}
.fcard--demo{border-style:dashed}
.fcard--demo p{font-size:.86rem;color:var(--bone-dim)}
.fcard--demo b{color:var(--bone)}
.fcard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;min-width:0}
.fcard__name{display:flex;flex-direction:column;gap:2px;min-width:0}
.fcard__rm{flex:none;background:none;border:1px solid var(--line);color:var(--bone-dim);border-radius:2px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;padding:6px 10px;min-height:34px;cursor:pointer;transition:.2s}
.fcard__rm:hover{color:var(--bone);border-color:var(--clay)}
.fcard__head b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard__head small{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone-dim)}
.checks{display:grid}
.ck{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line-2)}
.ck__lbl{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bone-dim);padding-top:5px}
.ck__val p{font-size:.82rem;color:var(--bone-dim);line-height:1.45;margin-top:6px}
.ck__val small{display:block;font-size:.74rem;opacity:.85;margin-top:2px}
.qrow p{font-size:.82rem;color:var(--bone-dim);line-height:1.45;margin-top:6px}
.qrow small{display:block;font-size:.74rem;opacity:.85;margin-top:2px}
.qwarn{margin-top:10px;border-left:2px solid var(--clay);background:rgba(221,138,91,.08);padding:10px 12px}
.qwarn--bad{border-left-color:#ff6b4a;background:rgba(255,107,74,.1)}
.qwarn b{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--clay);margin-bottom:4px}
.qwarn--bad b{color:#ff8a6b}
.qwarn p{font-size:.84rem;color:var(--bone);line-height:1.45;margin:0}
.qwarn .btn{margin-top:10px}
.check--sm{margin:8px 0 0;font-size:.82rem;align-items:center}
.check .dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line);vertical-align:middle;margin:0 2px}
.note{font-size:.84rem;line-height:1.5;color:var(--bone);border-left:2px solid #9fd4a8;background:rgba(159,212,168,.07);padding:10px 12px;margin:14px 0 0}
.stk-q{margin-top:16px}
.stk-typedesc{display:none}

/* ---------- Vrsta i materijal ---------- */
.cards--stk{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}
.cards--stk:has(> .opt:only-child){grid-template-columns:1fr}
.opt--stk .opt__top b{font-size:1.15rem}
.stk-drop{margin-top:2px}
.stk-drop.is-over{border-color:var(--clay);background:rgba(221,138,91,.08)}
.stk-drop[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- Oblik ---------- */
.shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.shp{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:10px 4px 8px;color:var(--bone-dim);cursor:pointer;min-height:var(--tap);transition:.2s}
.shp svg{width:30px;height:30px;fill:rgba(236,227,212,.1);stroke:currentColor;stroke-width:1.4}
.shp span{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.06em}
.shp:hover{color:var(--bone);border-color:rgba(221,138,91,.6)}
.shp[aria-checked="true"]{color:var(--bone);border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra)}
.shp[aria-checked="true"] svg{fill:rgba(221,138,91,.25)}
.rng-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rng-head .field__label{margin:0}
.rng-head b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.1rem}
.rng-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.rng-row input[type=range]{flex:1;accent-color:var(--terra);min-height:36px}
.bgsw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bgsw button{width:40px;height:40px;border-radius:50%;border:2px solid rgba(236,227,212,.2);cursor:pointer;padding:0}
.bgsw button[aria-checked="true"]{border-color:var(--bone);box-shadow:0 0 0 2px var(--terra)}
.bgsw__own{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone-dim);cursor:pointer;border:1px solid var(--line);border-radius:30px;padding:4px 12px 4px 4px;min-height:40px}
.bgsw__own input{width:30px;height:30px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer}
.bgsw__own[data-on="true"]{color:var(--bone);border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra)}

/* ---------- Veličina ---------- */
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.szc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:12px 12px 10px;color:var(--bone);cursor:pointer;min-height:var(--tap);transition:.2s}
.szc:hover{border-color:rgba(221,138,91,.6)}
.szc[aria-checked="true"]{border-color:var(--terra);background:linear-gradient(180deg,rgba(196,67,42,.14),rgba(196,67,42,.04));box-shadow:inset 0 0 0 1px var(--terra)}
.szc b{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1}
.szc span{font-family:var(--mono);font-size:.7rem;font-weight:700}
.szc small{font-size:.72rem;color:var(--bone-dim)}
.szc .q{margin-top:6px;font-size:.52rem;padding:3px 6px}
.szc__pop{position:absolute;top:-8px;right:8px;font-style:normal;font-family:var(--mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.08em;background:var(--clay);color:var(--ink);padding:2px 6px;border-radius:2px;font-weight:700}
.szc--own b{font-size:1.2rem}
.stk-custom{margin-top:14px}
.stk-custom .hint{grid-column:1/-1;margin-top:0}

/* ---------- Količina ---------- */
.qtys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qtys button{background:var(--ink-2);border:1px solid var(--line);color:var(--bone);font-family:var(--display);font-size:1.4rem;padding:10px 6px;min-height:var(--tap);border-radius:3px;cursor:pointer;transition:.2s}
.qtys button:hover{border-color:rgba(221,138,91,.6)}
.qtys button[aria-checked="true"]{border-color:var(--terra);background:linear-gradient(180deg,rgba(196,67,42,.14),rgba(196,67,42,.04));box-shadow:inset 0 0 0 1px var(--terra)}
.stk-qty{margin-top:16px;max-width:240px}

#finChips{margin-bottom:4px}
#finChips button[aria-checked="true"]{background:var(--clay);color:var(--ink)}
.step__opt{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--clay);border:1px solid rgba(221,138,91,.5);border-radius:2px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.laminfo{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.laminfo p{font-size:.84rem;color:var(--bone-dim);line-height:1.45;margin:2px 0 8px}
.laminfo ul{display:grid;gap:6px}
.laminfo li{position:relative;padding-left:16px;font-size:.84rem;color:var(--bone-dim);line-height:1.45}
.laminfo li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--terra)}
.laminfo b{color:var(--bone);font-weight:600}

@media(min-width:1024px){
  .stk-view{aspect-ratio:1/1;max-height:calc(100vh - 210px)}
}
@media(max-width:1023px){
  .stk-view{aspect-ratio:auto;height:min(38vh,62vw);min-height:200px}
  .stk-bar{margin-top:6px}
}
@media(max-width:560px){
  .cards--stk{grid-template-columns:1fr}
  .cards--type{grid-template-columns:1fr 1fr;margin-bottom:6px}
  .cards--type .opt{padding:10px 12px}
  .cards--type .opt__desc{display:none}
  .cards--type .opt__top b{font-size:1rem}
  .stk-typedesc{display:block;margin:0 0 14px}
  .shapes{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .shp{padding:8px 2px 6px}
  .shp svg{width:24px;height:24px}
  .shp span{font-size:.5rem;letter-spacing:.02em}
  .ck{grid-template-columns:1fr;gap:2px}
  .ck__lbl{padding-top:0}
  .stk-bar .seg button{padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){.stk-busy span{animation:none}}
#konfigurator{scroll-margin-top:68px}
p.qwarn{font-size:.84rem;line-height:1.45;color:var(--bone)}
/* transfer je ravan na površini: samo blaga sjena */
.stk-view[data-type="transfer"] .stk-art .stk-c{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.qwarn .qwarn__alt{margin-top:10px;font-size:.8rem;color:var(--bone-dim)}
.qwarn a,.ck__val a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}

/* ---------- Dijalog "Maknuti pozadinu?" ---------- */
.bgdlg{margin:auto;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--ink-2);color:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-3)}
.bgdlg::backdrop{background:rgba(8,6,5,.72)}
.bgdlg h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.6rem;line-height:1;margin-bottom:14px}
.bgdlg__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bgdlg__opt{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:10px;color:var(--bone);cursor:pointer;font-family:var(--body)}
.bgdlg__opt[aria-checked="true"]{border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra)}
.bgdlg__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bgdlg__head b{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.bgdlg__head i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line)}
.bgdlg__opt[aria-checked="true"] .bgdlg__head i{border-color:var(--terra);background:radial-gradient(circle,var(--terra) 45%,transparent 50%)}
.bgdlg__opt canvas{width:100%;height:auto;aspect-ratio:1;border-radius:var(--r-xs);background:repeating-conic-gradient(#3a332e 0 25%,#2a2420 0 50%) 0 0/18px 18px}
.bgdlg__opt small{font-size:.76rem;color:var(--bone-dim);line-height:1.4}
.bgdlg .hint{margin-top:12px}
.bgdlg__btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.bgdlg__btns .btn{flex:1 1 140px}
@media(min-width:560px){.bgdlg__btns .btn{flex:0 0 auto}}

/* ---------- Printane ili transfer? ---------- */
.stk-offer{border-top:1px solid var(--line);scroll-margin-top:60px}
.stk-offer__lead{max-width:720px;color:var(--bone-dim);margin:-12px 0 24px}
.stk-offer__grid{display:grid;grid-template-columns:1fr;gap:14px}
.offer{display:flex;flex-direction:column;gap:12px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;scroll-margin-top:80px}
.offer__tag{color:var(--clay);font-size:.62rem}
.offer h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.9rem;line-height:.95}
.offer p{color:var(--bone-dim);font-size:.94rem}
.offer__list{display:grid;gap:8px}
.offer__list li{position:relative;padding-left:20px;font-size:.9rem;color:var(--bone-dim)}
.offer__list li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:2px;background:var(--terra)}
.offer__list b{color:var(--bone);font-weight:600}
.offer__steps{list-style:none;counter-reset:st;display:grid;gap:8px;border-top:1px solid var(--line-2);padding-top:12px}
.offer__steps li{counter-increment:st;display:grid;grid-template-columns:26px 1fr;gap:8px;font-size:.88rem;color:var(--bone-dim);align-items:start}
.offer__steps li::before{content:counter(st);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--clay);color:var(--clay);font-family:var(--mono);font-size:.62rem;font-weight:700}
.offer__cta{margin-top:auto;align-self:flex-start}
.cmp{overflow-x:auto;margin:22px 0 0;border:1px solid var(--line);border-radius:var(--r)}
.cmp table{width:100%;min-width:520px;border-collapse:collapse;font-size:.88rem}
.cmp th,.cmp td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--clay);font-weight:700}
.cmp tbody th{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone-dim);font-weight:400;width:28%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.stk-tips{margin-top:22px;border-left:2px solid var(--clay);padding:4px 0 4px 16px}
.stk-tips h3{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--clay);font-weight:700;margin-bottom:10px}
.stk-tips ul{display:grid;gap:8px}
.stk-tips li{font-size:.9rem;color:var(--bone-dim)}
.stk-tips b{color:var(--bone);font-weight:600}
#shapeContrast:empty,#designContrast:empty{display:none}
#shapeContrast .qwarn .btn,#designContrast .qwarn .btn{margin-top:10px}
@media(min-width:760px){
  .stk-offer__grid{grid-template-columns:1fr 1fr}
  .offer{padding:26px 24px}
}
@media(max-width:560px){
  .bgdlg{padding:16px}
  .bgdlg__opts{gap:8px}
  .bgdlg__opt{padding:8px}
}

/* boja folije (transfer) */
.foils{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.foils button{aspect-ratio:1;border-radius:50%;border:2px solid rgba(236,227,212,.2);padding:0;cursor:pointer;min-height:34px;transition:transform .15s}
.foils button:hover{transform:scale(1.06)}
.foils button[aria-checked="true"]{border-color:var(--bone);box-shadow:0 0 0 2px var(--terra)}
@media(max-width:560px){.foils{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}}

/* ---------- CMYK birač (kotač + svjetlina + C/M/Y/K) ---------- */
.cpk{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);display:grid;gap:12px}
.cpk__top{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:14px;align-items:center}
.cpk__wheel{position:relative;aspect-ratio:1;touch-action:none}
.cpk__wheel canvas{width:100%;height:100%;display:block;border-radius:50%;cursor:crosshair}
.cpk__wheel canvas:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.cpk__mark{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5);pointer-events:none}
.cpk__side{display:grid;gap:10px;min-width:0}
.cpk__now{display:flex;align-items:center;gap:10px}
.cpk__sw{width:40px;height:40px;border-radius:var(--r-xs);border:1px solid var(--line);flex:none}
.cpk__val{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;line-height:1.4}
.cpk__v{display:grid;gap:4px;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bone-dim)}
.cpk__v input{width:100%;accent-color:var(--terra);min-height:32px}
.cpk__hint{font-size:.72rem;color:var(--bone-dim);line-height:1.4}
.cpk__cmyk{display:grid;gap:6px}
.bgsw__cmyk{width:40px;height:40px;border-radius:50%;border:2px solid rgba(236,227,212,.2);cursor:pointer;padding:0;background:conic-gradient(#00aeef 0 25%,#ec008c 0 50%,#fff200 0 75%,#100d0b 0);color:transparent;font-size:0}
.bgsw__cmyk[aria-checked="true"]{border-color:var(--bone);box-shadow:0 0 0 2px var(--terra)}
.foil-pick{margin-top:10px}
.foil-pick i{width:16px;height:16px;border-radius:50%;background:conic-gradient(#00aeef 0 25%,#ec008c 0 50%,#fff200 0 75%,#100d0b 0)}
.foil-pick[aria-expanded="true"]{color:var(--bone);border-color:var(--clay);box-shadow:inset 0 0 0 1px var(--clay)}
.foils button{min-height:28px}
@media(max-width:400px){.cpk__top{grid-template-columns:120px 1fr;gap:10px}}

/* ---------- Kako naručiti (ispod naslova) i što se događa nakon upita ---------- */
.howto{list-style:none;display:grid;gap:8px;margin:22px 0 0;max-width:820px}
.howto li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;font-size:.9rem;color:var(--bone-dim);line-height:1.4}
.howto b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--clay);color:var(--clay);font-family:var(--mono);font-size:.7rem}
.howto strong{color:var(--bone);font-weight:600}
.howto__note{margin-top:12px!important;font-size:.8rem!important;color:var(--bone-dim)}
@media(min-width:760px){
  .howto{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .howto li{align-items:start}
}
.next-steps{margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.next-steps ol{list-style:none;counter-reset:ns;display:grid;gap:6px;margin-top:4px}
.next-steps li{counter-increment:ns;display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.86rem;color:var(--bone-dim);line-height:1.45}
.next-steps li::before{content:counter(ns);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--clay);color:var(--clay);font-family:var(--mono);font-size:.6rem;font-weight:700}