.tmac{font-family:Inter,system-ui,sans-serif;color:#111827;background:#f6f7f9;border:1px solid #e7e9ee;border-radius:18px;overflow:hidden;width:min(1600px,calc(100vw - 24px));position:relative;left:50%;transform:translateX(-50%);margin:16px 0}.tmac *{box-sizing:border-box}.tmac header{height:64px;background:#fff;border-bottom:1px solid #e6e8ed;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:20px}.tmac button{cursor:pointer}.reset{background:#fff;border:1px solid #dfe3e9;border-radius:10px;padding:9px 14px}.layout{display:grid;grid-template-columns:350px minmax(650px,1fr) 280px;gap:14px;padding:14px}.panel{background:#fff;border:1px solid #e1e4e9;border-radius:16px}.controls{padding:20px}.controls h3,.views h3{font-size:14px;margin:19px 0 10px}.controls h3:first-child{margin-top:0}.seg{display:grid;grid-template-columns:1fr 1fr;background:#eff1f4;padding:3px;border-radius:11px}.seg button,.place button{border:0;background:transparent;border-radius:9px;padding:11px}.seg .on,.place .on{background:#11131c;color:#fff}.controls select,.controls textarea{width:100%;border:1px solid #dce1e8;border-radius:10px;padding:11px}..colors{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.colors button{width:31px;height:31px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d7dce4}.colors button:nth-child(1){background:#fff}.colors button:nth-child(2){background:#111}.colors button:nth-child(3){background:#172238}.colors button:nth-child(4){background:#d52d2d}.colors button:nth-child(5){background:#315bd7}.colors button:nth-child(6){background:#3b7248}.colors .on{box-shadow:0 0 0 2px #5865ff}.picker{width:34px;height:34px;border:0}.place{border:1px solid #e1e4e9;border-radius:12px;padding:10px;margin-bottom:10px;font-size:12px}.place>div{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.place button{border:1px solid #e1e4e9;background:#fff}.controls p{font-size:12px;color:#6b7280}.controls textarea{min-height:110px}.ai{width:100%;border:0;border-radius:10px;padding:13px;color:#fff;font-weight:800;background:linear-gradient(90deg,#5c4df7,#a441df,#ff7048)}.status{font-size:12px;min-height:18px;margin-top:6px}.or{text-align:center;color:#a3a8b3;font-size:10px;margin:12px}.upload{border:1px dashed #cbd0d8;border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center}.upload input{display:none}.upload small{color:#7a8290}.preview{padding:14px}.previewtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.previewtop>b{background:#11131c;color:#fff;padding:11px 14px;border-radius:10px;font-size:13px}.previewtop span{font-size:12px;color:#737b89}.stage{height:675px;border-radius:15px;background:radial-gradient(circle,#fff 0,#f7f8fa 55%,#e9ebef 100%);position:relative;overflow:hidden}.garment{position:absolute;inset:3%;display:flex;align-items:center;justify-content:center}.garment img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.10))}.garment .tint{position:absolute;inset:5%;background:transparent;mix-blend-mode:multiply;pointer-events:none}.printzone{position:absolute;left:50%;top:49%;width:27%;height:35%;transform:translate(-50%,-50%);border:1px dashed rgba(87,96,255,.35);border-radius:8px}.artwrap{position:absolute;left:50%;top:50%;width:65%;height:65%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}.art{max-width:100%;max-height:100%}.artwrap span{font-size:13px;color:#747b88}.editor{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:24px;padding-top:18px}.editor label>b{font-size:12px;display:block;margin-bottom:8px}.editor label>span{display:flex;align-items:center;gap:8px}.editor input{width:75%}.editor output{font-size:12px}.moves button{border:1px solid #dfe3e9;background:#fff;border-radius:9px;padding:8px 10px}.views{padding:16px}.views>h3{margin-top:0}.views>b{font-size:12px}.viewgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0 18px}.view{border:1px solid #e0e4ea;background:#fff;border-radius:11px;padding:6px;min-height:128px}.view.on{background:#11131c;color:#fff}.view span{height:92px;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.view img{width:100%;height:100%;object-fit:contain}.view b{font-size:11px}.tip{background:#f4f5f7;border-radius:10px;padding:11px;font-size:11px;color:#6f7785}@media(max-width:1250px){.layout{grid-template-columns:320px 1fr}.views{grid-column:1/-1}.viewgrid{grid-template-columns:repeat(4,1fr)}}@media(max-width:900px){.tmac{width:100%;left:0;transform:none}.layout{grid-template-columns:1fr}.preview{order:1}.controls{order:2}.views{order:3}.stage{height:min(80vw,600px);min-height:420px}.editor{grid-template-columns:1fr}}
/* v2.3.2 — SVG šablone, postavitev konfiguratorja ostaja nespremenjena */
.garment .svgmount{width:90%;height:90%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 18px 20px rgba(0,0,0,.08))}
.garment .svgmount svg{width:100%;height:100%;display:block}
.view .thumbmount{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.view .thumbmount svg{width:96%;height:96%;display:block}
.garment .tint{display:none!important}

/* v2.3.7 - brez napisa "Realistični predogled" */
.previewtop .preview-spacer{
  background:transparent !important;
  padding:0 !important;
  width:1px;
  height:1px;
  display:block;
}

/* v2.4.2 AI */
.ai:disabled{opacity:.58;cursor:wait}.status.error{color:#b42318}

/* v2.4.3 — potrdi predogled / e-mail povpraševanje */
.inquiry-box{margin-top:20px;padding-top:2px}
.inquiry-box h3{margin-bottom:7px}
.inquiry-box p{font-size:12px;color:#6b7280;line-height:1.45;margin:0 0 10px}
.inquiry-box input,.inquiry-box textarea{width:100%;border:1px solid #dce1e8;border-radius:9px;padding:10px;margin-bottom:8px;background:#fff}
.inquiry-box textarea{min-height:72px;resize:vertical}
.inq-send{width:100%;border:0;border-radius:10px;padding:13px 14px;background:#11131c;color:#fff;font-weight:800;cursor:pointer}
.inq-send:hover{opacity:.93}
.inq-send:disabled{opacity:.5;cursor:wait}
.inq-status{font-size:12px;line-height:1.4;min-height:18px;margin-top:8px;color:#34704a}
.inq-status.error{color:#b42318}

/* v2.4.4 — več motivov / več pozicij */
.multi-help{font-size:11px!important;color:#6b7280!important;line-height:1.45;margin:-2px 0 10px!important}
.multi-summary{margin-top:16px;padding:10px;border:1px solid #e1e4e9;border-radius:10px;background:#fafbfc}
.multi-summary>strong{font-size:12px}
.multi-list{margin-top:7px;font-size:11px;color:#6b7280;display:flex;flex-wrap:wrap;gap:6px}
.multi-chip{border:1px solid #d9dee6;background:#fff;border-radius:999px;padding:6px 8px;font-size:10px;cursor:pointer}
.multi-chip:hover{background:#f2f4f7}
.view.has-design,.place button.has-design{box-shadow:inset 0 0 0 2px #2f8f5b}
.view.has-design:not(.on)::after{content:"✓";position:absolute;right:6px;top:5px;color:#2f8f5b;font-weight:900}
.view{position:relative}

/* v2.4.7 — mobilna prilagoditev konfiguratorja */
@media (max-width: 900px){

  .tmac{
    width:calc(100vw - 16px);
    max-width:none;
    left:50%;
    transform:translateX(-50%);
    margin:8px 0;
    border-radius:14px;
  }

  .tmac header{
    height:auto;
    min-height:56px;
    padding:10px 12px;
    gap:10px;
    font-size:16px;
  }

  .tmac header strong{
    line-height:1.25;
  }

  .reset{
    flex:0 0 auto;
    padding:8px 10px;
    font-size:12px;
  }

  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:8px;
  }

  /* Na telefonu so najprej nastavitve, nato predogled */
  .controls{
    order:1;
    min-width:0;
    padding:14px;
  }

  .preview{
    order:2;
    min-width:0;
    padding:8px;
    overflow:hidden;
  }

  .views{
    order:3;
    min-width:0;
    padding:12px;
  }

  .panel{
    width:100%;
    min-width:0;
    border-radius:13px;
  }

  .controls h3,
  .views h3{
    margin:16px 0 9px;
  }

  .seg button,
  .place button{
    min-height:44px;
    padding:10px 7px;
  }

  .colors{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
  }

  .colors button{
    width:34px;
    height:34px;
  }

  .place{
    padding:9px;
  }

  .place > div{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .previewtop{
    margin:2px 3px 8px;
  }

  /* Kvadraten predogled, primeren za SVG modele */
  .stage{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1 / 1;
    border-radius:12px;
  }

  .garment{
    inset:0;
  }

  .garment .svgmount{
    width:100%;
    height:100%;
  }

  .garment .svgmount svg{
    width:100%;
    height:100%;
  }

  /* Urejanje motiva pod predogledom */
  .editor{
    grid-template-columns:1fr;
    gap:14px;
    padding:14px 4px 4px;
  }

  .editor label{
    width:100%;
    min-width:0;
  }

  .editor label > span{
    width:100%;
    flex-wrap:wrap;
  }

  .editor input[type="range"]{
    width:calc(100% - 55px);
  }

  .moves{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }

  .moves button{
    min-width:44px;
    min-height:42px;
  }

  /* Izbira strani v dveh stolpcih */
  .viewgrid{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:15px;
  }

  .view{
    min-width:0;
    min-height:120px;
  }

  .view span{
    height:86px;
  }

  .upload{
    width:100%;
    text-align:center;
  }

  .ai,
  .inq-send{
    min-height:46px;
  }

  .multi-list{
    gap:7px;
  }

  .multi-chip{
    min-height:36px;
  }
}

@media (max-width: 420px){

  .tmac{
    width:calc(100vw - 8px);
  }

  .layout{
    padding:5px;
  }

  .controls{
    padding:12px;
  }

  .preview{
    padding:5px;
  }

  .tmac header{
    font-size:15px;
  }

  .reset{
    font-size:11px;
    padding:7px 8px;
  }

  .view{
    min-height:108px;
  }

  .view span{
    height:76px;
  }
}

/* v2.4.9 — prikaz SVG majice in kape na mobilniku */
@media (max-width: 900px) {
  .tmac {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
  }

  .layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
  }

  .preview {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
  }

  .controls {
    order: 2 !important;
  }

  .views {
    order: 3 !important;
  }

  .stage {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  .garment {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  .garment .svgmount {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .garment .svgmount svg {
    display: block !important;
    width: 96% !important;
    height: 96% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .printzone {
    z-index: 2 !important;
  }

  .artwrap {
    z-index: 3 !important;
  }

  .editor {
    grid-template-columns: 1fr !important;
  }

  .view .thumbmount,
  .view .thumbmount svg {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Po naložitvi motiva skrij gumb »+ Naloži motiv« */
.artwrap > img.art:not([hidden]) + span {
  display: none !important;
}

/* v2.5.5 — urejen prikaz velikosti in količin */
.tmac .size-quantities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tmac .size-quantities > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 8px 8px 12px;
  border: 1px solid #dce1e8;
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.tmac .size-quantities > label:focus-within {
  border-color: #5865ff;
  box-shadow: 0 0 0 3px rgba(88, 101, 255, .12);
}

.tmac .size-quantities > label > span {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: #111827;
}

.tmac .size-quantities input[type="number"] {
  display: block;
  width: 68px;
  height: 36px;
  min-width: 0;
  margin: 0;
  padding: 6px 5px;
  border: 1px solid #dce1e8;
  border-radius: 8px;
  background: #f8f9fa;
  color: #111827;
  text-align: center;
  font: inherit;
  font-size: 13px;
}

.tmac .size-quantities input[type="number"]:focus {
  border-color: #5865ff;
  outline: none;
  background: #fff;
}

.tmac .size-help {
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.45;
  color: #6b7280 !important;
}

/* Količina pri izbiri kape */
.tmac .cap-quantity-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 12px;
  border: 1px solid #dce1e8;
  border-radius: 10px;
  background: #fff;
}

.tmac .cap-quantity-label > span {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.tmac .cap-quantity-label input[type="number"] {
  width: 90px;
  height: 38px;
  margin: 0;
  padding: 7px;
  border: 1px solid #dce1e8;
  border-radius: 8px;
  background: #f8f9fa;
  color: #111827;
  text-align: center;
  font: inherit;
}

@media (max-width: 360px) {
  .tmac .size-quantities {
    grid-template-columns: 1fr;
  }

  .tmac .size-quantities > label {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .tmac .size-quantities input[type="number"] {
    width: 76px;
  }
}