/* ============================================================
   Konfigurator majica — stilovi (uz styles.css, moto.css i naljepnice.css)
   ============================================================ */

/* ---------- Pregled ---------- */
/* svijetla "studijska" podloga kao na fotografiji proizvoda; majica baca meku sjenu */
.mj-view{background:radial-gradient(120% 95% at 50% 8%,#f6f2ec,#ddd6cb 70%,#cfc7ba);border-color:rgba(236,227,212,.18)}
.mj-art{position:absolute;inset:4% 4% 12%;display:grid;place-items:center}
.mj-art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 16px rgba(70,48,28,.26)) drop-shadow(0 2px 3px rgba(70,48,28,.18))}
.mj-note{font-size:.74rem;color:var(--bone-dim);margin-top:6px;line-height:1.4}
.mj-note:empty{display:none}

/* ---------- Proizvod ---------- */
.cards--gm{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt--gm{padding:10px 12px 12px;gap:4px}
.opt--gm .opt__ic{display:block;height:84px;margin:0 0 4px;padding:6px 0;border-radius:2px;background:radial-gradient(110% 95% at 50% 8%,#f3eee7,#d6cec2 75%)}
.opt--gm .opt__ic svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 5px rgba(70,48,28,.25))}
.opt--gm .opt__top b{font-size:1.08rem}
.opt--gm .opt__desc{font-size:.76rem}
.opt--gm .opt__spec{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--clay)}
.opt__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}
.opt--gm{position:relative}

/* ---------- Boja ---------- */
.gsw{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;margin-top:6px}
.gsw button{aspect-ratio:1;border-radius:50%;border:2px solid rgba(236,227,212,.22);padding:0;cursor:pointer;min-height:40px;transition:transform .15s;box-shadow:inset 0 -6px 10px rgba(0,0,0,.18)}
.gsw button:hover{transform:scale(1.06)}
.gsw button[aria-checked="true"]{border-color:var(--bone);box-shadow:0 0 0 2px var(--terra),inset 0 -6px 10px rgba(0,0,0,.18)}

/* ---------- Dizajni ---------- */
.dzs{display:grid;gap:10px;margin-top:12px}
.dzs:empty{display:none}
.dz{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:12px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start}
.dz--demo{border-style:dashed}
.dz__img{width:64px;height:64px;border-radius:2px;background:repeating-conic-gradient(#3a332e 0 25%,#2a2420 0 50%) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden}
.dz__img img{max-width:88%;max-height:88%;display:block}
.dz__head{display:flex;justify-content:space-between;gap:8px;align-items:start;min-width:0}
.dz__head div{min-width:0;display:flex;flex-direction:column;gap:2px}
.dz__head b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz__head small{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone-dim)}
.dz__rm{flex:none;background:none;border:1px solid var(--line);color:var(--bone-dim);border-radius:2px;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;padding:6px 9px;min-height:32px;cursor:pointer}
.dz__rm:hover{color:var(--bone);border-color:var(--clay)}
.dz .checks{grid-column:1/-1}
.dz .ck{grid-template-columns:84px 1fr}
.dz__use{font-size:.78rem;color:var(--bone-dim);margin-top:6px}

/* ---------- Vlastiti tekst ---------- */
.txtadd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.txtadd .hint{margin:0;flex:1 1 200px}
.txtadd__btn b{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:0;color:var(--clay);text-transform:none}
.txtbox{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);display:grid;gap:10px}
.txtbox textarea{min-height:64px;font-size:16px}
.txtfonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.txtfonts button{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:8px 4px 6px;color:var(--bone);cursor:pointer;min-height:var(--tap);transition:.2s}
.txtfonts button span{font-size:1.35rem;line-height:1.1}
.txtfonts button small{font-family:var(--mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone-dim)}
.txtfonts button:hover{border-color:rgba(221,138,91,.6)}
.txtfonts button[aria-checked="true"]{border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra);background:linear-gradient(180deg,rgba(196,67,42,.14),rgba(196,67,42,.04))}
.txtbox__prev{min-height:84px;display:grid;place-items:center;text-align:center;white-space:pre-line;padding:14px 10px;border-radius:3px;border:1px solid var(--line);font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.12;overflow-wrap:anywhere}
.txtbox__prev:empty::before{content:"Pregled teksta";font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5}
.dz__acts{display:flex;gap:6px;flex:none}
.txtfonts{max-height:264px;overflow:auto;padding:2px}

/* ---------- Nadimci po majici ---------- */
.nick{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.nick__on{margin:0}
.nick__edit{display:grid;gap:10px;margin-top:14px}
.nick__list{display:grid;gap:12px}
.nick__size{display:grid;gap:6px}
.nick__size h4{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--clay);font-weight:700}
.nick__row{display:grid;grid-template-columns:22px minmax(0,1fr) 64px 40px;align-items:center;gap:6px}
.nick__row--nonum{grid-template-columns:22px minmax(0,1fr) 40px}
.nick__row .nick__b{width:100%}
.nick__i{font-family:var(--mono);font-size:.7rem;color:var(--bone-dim);text-align:right}
.nick__n{min-width:0;font-size:1.15rem!important;letter-spacing:.02em;padding:8px 10px!important}
.nick__b{width:58px;text-align:center;font-family:var(--mono)}
.nick__x{width:40px;height:40px;border-radius:3px;border:1px solid var(--line);background:var(--ink);color:var(--bone-dim);font-size:1.1rem;cursor:pointer}
.nick__x[aria-pressed="true"]{border-color:var(--clay);color:var(--clay)}
.nick__row[data-x="true"] .nick__n{opacity:.45;text-decoration:line-through}
.nick__row[data-miss="true"] .nick__n{border-color:rgba(255,138,107,.7)}
.pe__dzs .pe__txt{background:none;border-style:dashed;border-color:rgba(221,138,91,.55);color:var(--clay);font-family:var(--display);font-size:1.1rem}

/* ---------- Položaji ---------- */
.poss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.posc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:11px 12px 10px 36px;color:var(--bone);cursor:pointer;min-height:var(--tap);font-family:var(--body);transition:.2s}
.posc::before{content:"";position:absolute;left:12px;top:13px;width:14px;height:14px;border-radius:3px;border:1.5px solid var(--line)}
.posc[data-on="true"]::before{background:var(--terra);border-color:var(--terra);box-shadow:inset 0 0 0 2px var(--ink-2)}
.posc:hover{border-color:rgba(221,138,91,.6)}
.posc[aria-pressed="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)}
.posc b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.02rem;line-height:1.05}
.posc small{font-size:.72rem;color:var(--bone-dim);line-height:1.3}
.posc[data-on="true"] small{font-family:var(--mono);font-size:.62rem;color:var(--clay);letter-spacing:.04em}
.pe{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);display:grid;gap:14px}
.pe__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pe__head h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.3rem;line-height:1}
.pe__dzs{display:flex;flex-wrap:wrap;gap:8px}
.pe__dzs button{width:56px;height:56px;border-radius:3px;border:1px solid var(--line);background:repeating-conic-gradient(#3a332e 0 25%,#2a2420 0 50%) 0 0/10px 10px;padding:4px;cursor:pointer;display:grid;place-items:center}
.pe__dzs button img{max-width:100%;max-height:100%;display:block}
.pe__dzs button[aria-checked="true"]{border-color:var(--terra);box-shadow:0 0 0 1px var(--terra)}
.pe__dzs .pe__new{background:none;border-style:dashed;border-color:rgba(221,138,91,.55);color:var(--clay);font-family:var(--mono);font-size:1.2rem}
.pe .chips{gap:6px}
.pe .chipbtn{min-height:34px}
.pe__off{justify-self:start}
.pe .qrow p{margin-top:6px}

/* ---------- Veličine i količina ---------- */
.szq{display:grid;gap:6px;margin-top:6px}
.szq__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 6px 6px 12px;background:var(--ink-2);border:1px solid var(--line);border-radius:3px}
.szq__row[data-n="0"] .szq__lbl{color:var(--bone-dim)}
.szq__row:not([data-n="0"]){border-color:rgba(196,67,42,.6)}
.szq__lbl{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;line-height:1.1}
.szq__lbl small{font-family:var(--body);text-transform:none;font-size:.74rem;color:var(--bone-dim);margin-left:6px}
.szq__step{display:flex;align-items:center;gap:4px}
.szq__step button{width:40px;height:40px;border-radius:3px;border:1px solid var(--line);background:var(--ink);color:var(--bone);font-size:1.2rem;cursor:pointer}
.szq__step button:hover{border-color:var(--clay)}
.szq__step input{width:58px;height:40px;text-align:center;font-family:var(--mono);font-size:1rem}
.szq__total{margin-top:12px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--clay)}

@media(max-width:1023px){
  .mj-art{inset:2% 2% 11%}
}
@media(max-width:560px){
  .opt--gm .opt__ic{height:62px}
  .opt--gm .opt__desc{display:none}
  .poss{grid-template-columns:1fr 1fr}
  .posc{padding:9px 10px 9px 32px}
  .posc::before{left:10px;top:11px}
  .gsw{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
}

/* tri tehnike (DTF, flex u boji, flex u jednoj boji) */
@media(min-width:1024px){
  .stk-offer__grid--3{grid-template-columns:repeat(3,1fr)}
}