/* ── FOTO STUDIO — MOBILE STYLES ── */

/* Trigger gumb */
.fs-mob-drawer-trigger {
  flex-shrink: 0;
  padding: 0;
  background: transparent;
}
.fs-mob-trigger-btn {
  width: 100%;
  padding: 14px 16px;
  background: #f5f3ef;
  border: 1px solid #e6e2db;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1a17;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.fs-mob-trigger-btn:active {
  background: #f0ede6;
  border-color: #111;
  transform: scale(0.985);
}

/* Bulk trigger (premium pill) */
.fs-bulk-trigger-wrap{ margin-top: 10px; padding: 0 12px; }
.fs-bulk-trigger-icon{ font-size: 18px; line-height: 1; flex-shrink: 0; }
.fs-bulk-trigger-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fs-bulk-trigger-label{ font-size: 12px; font-weight: 600; color: #6a645b; }
.fs-bulk-trigger-sub{ font-size: 15px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-bulk-trigger-arrow{ margin-left:auto; display:flex; align-items:center; opacity:.65; }

/* Header zoom slider */
#fs-header-zoom { display: flex; }

/* Crop — belo ozadje */
.fs-crop-wrapper { background: #f5f2eb !important; }

/* ─────────────────────────────────────────────────────────────
   Premium sticky bottom bar (Konfigurator)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Skrij mobile projekt bar — ne rabimo ločenega bara */
  #fs-proj-mobile-bar { display: none !important; }

  .fs-sticky-cart{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 9999;
  }

  .fs-sticky-cart__meta{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width: 0;
  }

  .fs-sticky-cart__count{
    font-size: 12px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fs-sticky-cart__total{
    font-size: 14px;
    font-weight: 800;
    color: #111;
  }

  .fs-sticky-cart__btn{
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700;
    flex: 0 0 auto;
  }

  /* prevent content being hidden behind sticky bar */
  #fs-panel-2{ padding-bottom: 72px; }

  /* hide header on mobile (replaced by sticky bar) */
  #fs-panel-2 #fs-btn-add-all{ display:none !important; }
  #fs-panel-2 .fs-konfig-header { display:none !important; }
  #fs-panel-2 .fs-konfig-actions { display:flex !important; justify-content:flex-end; }
  #fs-panel-2 .fs-konfig-add-btn { display:none !important; }
  #fs-delete-all-btn { display:inline-flex !important; }
}

@media (max-width: 767px) and (orientation: portrait) {
  /* Modal — cel zaslon */
  .fs-editor-modal-inner {
    height: 100svh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .fs-editor-modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .fs-editor-two-col {
    flex: 1 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    display: flex !important;
    overflow: hidden !important;
  }
  .fs-editor-settings-panel { display: none !important; }
  .fs-editor-photo-panel {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Header — kompakten, slider noter */
  .fs-editor-photo-header {
    padding: 5px 10px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .fs-editor-photo-header > div {
    flex-shrink: 0 !important;
  }
  .fs-editor-photo-header > div > div:first-child {
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  .fs-editor-photo-header > div > div:last-child {
    font-size: 10px !important;
    margin-top: 0 !important;
  }

  /* Fill/Fit gumbi — vidni, kompaktni */
  .fs-mode-btn-row {
    display: flex !important;
    gap: 5px !important;
    padding: 0 10px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
  }
  .fs-mode-btn-row .fs-btn {
    padding: 6px 8px !important;
    font-size: 12px !important;
    flex: 1 !important;
  }

  /* Crop container — zapolni prostor */
  #fs-crop-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #fs-crop-container > div {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .fs-editor-modal .fs-crop-wrapper {
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Zoom vrstica — skrita (slider je v headerju) */
  .fs-zoom-row { display: none !important; }
  .fs-crop-hint { display: none !important; }

  /* Footer */
  .fs-editor-photo-footer {
    padding: 6px 12px 8px 12px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .fs-editor-price-badge {
    font-size: 16px !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
  }
  #fs-add-one {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .fs-mobile-only { display: block !important; }

  /* Konfig grid */
  .fs-editor-modal-title { max-width: 120px; font-size: 12px; }
}

@media (max-width: 767px) {
  .fs-konfig-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .fs-konfig-card-thumb { aspect-ratio: 1; border-radius: 10px 10px 0 0; }
  .fs-konfig-card-name { font-size: 14px; }
  .fs-konfig-qty-btn { width: 30px; height: 30px; font-size: 18px; }

  

  /* ── Modul "Standardne fotografije" (photos) — premium mobile layout ── */
  .fs-photos-layout .fs-pol-cards{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .fs-photos-layout .fs-konfig-card{
    border-radius: 14px;
    overflow: hidden;
  }

  /* manj sivega roba okrog slike */
  .fs-photos-layout .fs-konfig-card-thumb{
    position: relative;
    padding: 4px !important;      /* default je 10px */
    background: #f3f1ec;          /* malenkost svetlejše */
  }

  /* canvas naj ostane "natural" — ne nastavljaj height:100%, ker inline-drag računa koordinate */
  .fs-photos-layout .fs-konfig-card-img{
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .fs-photos-layout .fs-konfig-card-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
  }

  .fs-photos-layout .fs-konfig-card-right{
    display:flex;
    align-items:center;
    gap: 8px;
  }

  .fs-photos-layout .fs-konfig-settings-btn{
    display:none !important;

    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e8e4dc;
    background: #fff;
    font-size: 22px; font-weight:600;
    line-height: 1;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Floating gear on thumbnail (mobile only) */
  .fs-photos-layout .fs-konfig-gear-btn{
    position:absolute;
    bottom: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 3;
    color:#111;
  }
  .fs-photos-layout .fs-konfig-gear-btn:active{
    transform: scale(0.96);
  }
  .fs-photos-layout .fs-konfig-gear-btn .fs-gear-ic{
    display:block;
  }


  
  /* Check badge stays top-right above gear */
  .fs-photos-layout .fs-konfig-card-check{
    position:absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
  }
/* qty row naj bo kompaktnejši na telefonu */
  .fs-photos-layout .fs-konfig-qty-row{
    gap: 6px;
  }
  .fs-photos-layout .fs-konfig-qty-btn{
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  /* drag reorder states */
  body.fs-reorder-noscroll{
    overflow: hidden;
    touch-action: none;
  }
  .fs-photos-layout .fs-dragging{
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    transform: none;
  }
  .fs-photos-layout .fs-drag-placeholder{
    border: 2px dashed #e8ad61;
    background: rgba(232,173,97,0.08);
  }

  /* na mobilnem pokaži handle, na desktopu ga skrijemo spodaj */
  /* Mobile premium: tap on photo (hide redundant edit button) */
  .fs-photos-layout .fs-konfig-edit-btn{
    display:none !important;
  }
  /* make thumb feel tappable */
  .fs-photos-layout .fs-konfig-card-thumb{
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .fs-photos-layout .fs-ph-thumb-wrap canvas,
  .fs-photos-layout .fs-konfig-card-thumb canvas {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }
  .fs-inline-crop-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.3s;
    white-space: nowrap;
  }

  /* Akcijski gumbi na mobile — 2 vrstici */
  .fs-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0 !important;
    padding-top: 8px;
    border-top: none;
  }
  .fs-actions-row {
    display: flex;
    gap: 8px;
  }
  .fs-actions .fs-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-size: 12px;
    border-radius: 10px;
    flex: 1;
  }
  .fs-actions .fs-btn .fs-btn-icon { font-size: 14px; line-height: 1; }
  #fs-btn-delete-project { color: #c00; }
  #fs-btn-to-step3 { display: none !important; }


}

@media (min-width: 768px) {
  #fs-header-zoom { display: none !important; }
  .fs-mob-drawer-trigger { display: none !important; }
  .fs-mobile-only { display: none !important; }
}







/* ── LANDSCAPE — 2 stolpca: levo nastavitve, desno slika ── */
@media (max-height: 500px) and (orientation: landscape) {

  /* Modal — cel zaslon, brez scrolla */
  .fs-editor-modal-inner {
    border-radius: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Modal header — kompakten */
  .fs-editor-modal-header {
    padding: 4px 12px !important;
    flex-shrink: 0 !important;
  }
  .fs-editor-modal-title { font-size: 11px !important; }
  .fs-editor-modal-nav button { padding: 3px 8px !important; font-size: 11px !important; }
  .fs-editor-modal-close { width: 26px !important; height: 26px !important; font-size: 14px !important; }

  /* Body — vodoravno */
  .fs-editor-modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
  }

  /* Two-col — row */
  .fs-editor-two-col {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
  }

  /* LEVO: nastavitve + footer skupaj v flex column */
  .fs-editor-settings-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 100% !important;
    overflow: hidden !important;
    border-right: 1px solid #f0ede6 !important;
    flex-shrink: 0 !important;
  }

  /* Drawer body — scrollable, zavzame preostanek */
  .fs-editor-settings-panel .fs-drawer-body {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Footer — spodaj v levem stolpcu, NI absolute */
  .fs-editor-photo-footer {
    position: static !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    background: white !important;
    border-top: 1px solid #f0ede6 !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    order: 999 !important;
  }
  .fs-editor-price-badge { font-size: 13px !important; flex-shrink: 0 !important; }
  #fs-add-one { padding: 5px 10px !important; font-size: 12px !important; flex-shrink: 0 !important; }
  .fs-qty-btn { width: 26px !important; height: 26px !important; font-size: 14px !important; }
  .fs-qty-val { font-size: 13px !important; min-width: 16px !important; text-align: center !important; }

  /* DESNO: samo crop, zapolni vse */
  .fs-editor-photo-panel {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Skrij header, mode gumbe, hint na desni */
  .fs-editor-photo-header { display: none !important; }
  .fs-mode-btn-row { display: none !important; }
  .fs-crop-hint { display: none !important; }
  .fs-mob-drawer-trigger { display: none !important; }
  .fs-mobile-only { display: none !important; }

  /* Crop — zapolni vse */
  #fs-crop-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #fs-crop-container > div {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .fs-crop-wrapper {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Drawer sekcije — kompaktne */
  .fs-drawer-section { padding: 6px 10px !important; }
  .fs-drawer-section-title { font-size: 11px !important; margin-bottom: 5px !important; }
  .fs-drawer-format-item { padding: 4px 8px !important; }
  .fs-drawer-format-size { font-size: 11px !important; }
  .fs-drawer-format-sub { font-size: 10px !important; }
  .fs-mat-tab { padding: 4px 8px !important; font-size: 11px !important; }
  .fs-drawer-format-icon { width: 28px !important; height: 20px !important; }

  /* ── BULK (Nastavi za vse) — premium ena vrstica ───────────────── */
  .fs-bulk-bar { padding: 12px 12px !important; }
  .fs-bulk-bar-top { display:none !important; }
  .fs-bulk-grid { gap: 8px !important; }

  .fs-bulk-mobile-row{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .fs-bulk-mobile-row::-webkit-scrollbar{ display:none; }

  .fs-bulk-mobile-field,
  .fs-bulk-mobile-qty,
  .fs-bulk-mobile-apply{
    flex:0 0 auto;
  }

  .fs-bulk-mobile-label{
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#9a9a9a;
    margin:0 0 6px 2px;
  }

  .fs-bulk-mobile-select{
    height:42px;
    border-radius:12px;
    border:1px solid #e8e4dc;
    background:#fff;
    padding:0 12px;
    font-weight:700;
    min-width:150px;
  }

  .fs-bulk-mobile-qty-control{
    height:42px;
    border:1px solid #e8e4dc;
    border-radius:12px;
    padding:0 6px;
    background:#fff;
  }

  /* črni gumbi (samo v bulk vrstici) */
  .fs-bulk-mobile-apply-btn{
    height:42px;
    border-radius:12px;
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
    padding:0 14px !important;
  }
  .fs-bulk-mobile-qty-control .fs-qty-btn{
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
    width:36px;
    height:36px;
    border-radius:10px;
  }
  .fs-bulk-mobile-qty-control #fs-bulk-qty-val{ font-weight:800; min-width:20px; text-align:center; }

  /* ── PHOTOS module: mobile premium bulk bar (format + papir + qty + apply) ── */
  .fs-ph-mobile-bar{
    width:100%;
    background:#fff;
    border:1px solid #ece7de;
    border-radius:16px;
    padding:12px;
    margin:10px 0 14px;
    box-sizing:border-box;
  }
  .fs-ph-mobile-row{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .fs-ph-mobile-row::-webkit-scrollbar{ display:none; }

  .fs-ph-m-label{
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#9a9a9a;
    margin:0 0 6px 2px;
  }

  .fs-ph-m-select{
    height:42px;
    border-radius:12px;
    border:1px solid #e8e4dc;
    background:#fff;
    padding:0 12px;
    font-weight:700;
    min-width:170px;
  }

  .fs-ph-m-qtybox{
    height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #e8e4dc;
    border-radius:12px;
    background:#fff;
    padding:0 10px;
  }
  .fs-ph-m-qtybtn{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid #111;
    background:#111;
    color:#fff;
    font-size:18px;
    line-height:1;
  }
  .fs-ph-m-qtyval{ font-weight:800; min-width:18px; text-align:center; }

  .fs-ph-m-applybtn{
    height:42px;
    border-radius:12px;
    background:#111 !important;
    border:1px solid #111 !important;
    color:#fff !important;
    padding:0 14px !important;
    font-weight:800;
  }

  .fs-ph-mobile-stats{
    margin-top:10px;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .fs-ph-m-total{ color:#111; }
  .fs-ph-m-dot{ color:#bbb; }
}

 


/* ── Premium mobile left drawer (per-photo settings) ───────────────── */
html.fs-mob-drawer-open, html.fs-mob-drawer-open body{
  overflow: hidden !important;
}

.fs-mob-drawer{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
}

.fs-mob-drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .22s ease;
}

.fs-mob-drawer__panel{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(86vw, 390px);
  background: #fff;
  border-right: 1px solid rgba(0,0,0,.08);
  transform: translateX(-102%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}

.fs-mob-drawer.is-open{
  pointer-events: auto;
}

.fs-mob-drawer.is-open .fs-mob-drawer__overlay{
  opacity: 1;
}

.fs-mob-drawer.is-open .fs-mob-drawer__panel{
  transform: translateX(0);
}

.fs-mob-drawer__header{
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-mob-drawer__title{
  font-size: 14px;
  font-weight: 700;
  color: #111;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fs-mob-drawer__close{
  border: 0;
  background: transparent;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 10px;
}

.fs-mob-drawer__content{
  padding: 10px 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.fs-mob-section{
  margin-bottom: 10px;
}

.fs-mob-section__title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  color: #bbb;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding: 0 2px;
}

.fs-mob-pillgrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.fs-mob-pill{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  color: #111;
}

.fs-mob-pill__price{
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

.fs-mob-pill.is-active{
  border-color: rgba(0,0,0,.85);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.fs-mob-muted{
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.fs-mob-danger{
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 700;
  color: #b00020;
}

.fs-mob-drawer__footer{
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.fs-mob-drawer__done{
  width: 100%;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 800 !important;
}

/* Make the per-photo "⋯" button look premium */
@media (max-width: 767px){
  .fs-konfig-settings-btn{
    border-color: rgba(0,0,0,.15) !important;
    color: #111 !important;
    font-weight: 900 !important;
  }
}


/* ───────────────────────────────────────────────
   Premium mobile bulk bar (fotografije)
   ─────────────────────────────────────────────── */
@media (max-width: 767px){
  .fs-ph-mobile-row--premium{
    display:flex;
    align-items:flex-end;
    gap:10px;
  }
  .fs-ph-m-settingsbtn{
    border:1px solid rgba(0,0,0,.15);
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
    font-weight:700;
    white-space:nowrap;
    flex:1 1 auto;
  }
  .fs-ph-m-applybtn{
    background:#111 !important;
    border:1px solid #111 !important;
    color:#fff !important;
    border-radius:12px !important;
    padding:10px 14px !important;
    font-weight:700 !important;
  }
  .fs-ph-m-qtybox{
    border:1px solid rgba(0,0,0,.15);
    border-radius:12px;
    padding:6px 8px;
    background:#fff;
  }
  .fs-ph-m-qtybtn{
    background:transparent;
  }
  .fs-mob-primary{
    width:100%;
    margin-top:10px;
    background:#111 !important;
    border:1px solid #111 !important;
    color:#fff !important;
    border-radius:12px !important;
    padding:12px 14px !important;
    font-weight:800 !important;
  }
  .fs-mob-qtyline{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
  }
  .fs-mob-qtyval{
    min-width:32px;
    text-align:center;
    font-weight:800;
    font-size:16px;
  }
}


/* ───────────────────────────────────────────────
   Photos module: hide desktop sidebar on mobile
   ─────────────────────────────────────────────── */
@media (max-width: 767px){
  /* In photos module, use premium mobile bar + drawer; hide desktop sidebar */
  .fs-photos-layout .fs-pol-sidebar{ display:none !important; }
  .fs-photos-layout{ grid-template-columns: 1fr !important; }
  .fs-photos-layout .fs-pol-cards-wrap{ width:100% !important; }
  .fs-photos-layout .fs-pol-cards{ grid-template-columns: 1fr !important; }
}


/* ── Standardne fotografije: premium trigger bar + brez sidebara na telefonu ── */
@media (max-width: 767px){
  .fs-ph-mob-trigger .fs-mob-trigger-btn{
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
  }
  .fs-ph-mob-trigger .fs-mob-trigger-btn:active{
    background:#000 !important;
    border-color:#000 !important;
  }
  .fs-ph-mob-sub{
    font-weight:500;
    font-size:12px;
    color:rgba(255,255,255,.82);
    line-height:1.2;
  }
  .fs-ph-m-statsline{
    margin-top:8px;
    padding:0 2px;
  }
  .fs-ph-m-statsline .fs-ph-m-stat,
  .fs-ph-m-statsline .fs-ph-m-total,
  .fs-ph-m-statsline .fs-ph-m-dot{
    color:#1c1a17;
  }
}


/* --- Premium: črni gumbi za mobile drawer (photos + editor) --- */
@media (max-width: 767px){
  .fs-mob-primary,
  .fs-mob-drawer__done,
  .fs-btn.fs-mob-primary{
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
  }
  .fs-mob-trigger-btn{
    color:#111;
  }
}

@media (max-width: 767px){
  #fs-bulk-bar .fs-bulk-bar-top{ display:none !important; }
}



/* Standardne fotografije – premium trigger bar (samo mobile) */
@media (max-width: 767px){
  .fs-ph-mob-trigger .fs-mob-trigger-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .fs-ph-mob-trigger .fs-ph-mob-ico{
    font-size:18px;
    line-height:1;
  }
  .fs-ph-mob-trigger .fs-ph-mob-txt{ display:flex; flex-direction:column; gap:2px; flex:1; }
  .fs-ph-mob-trigger .fs-ph-mob-top{ font-size:12px; color:#777; font-weight:600; }
  .fs-ph-mob-trigger .fs-ph-mob-sub{ font-size:15px; color:#111; font-weight:700; }
  .fs-ph-mob-trigger .fs-ph-mob-chevron{ opacity:.55; display:flex; align-items:center; }
  .fs-ph-mob-trigger .fs-mob-trigger-btn:active{ transform:scale(0.99); }
}



/* ─────────────────────────────────────────────────────────────
   MOBILE PREMIUM POLISH (photos module only) — desktop untouched
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px){

  /* 1) Trigger bar: light pill (keep black only for CTA) */
  .fs-ph-mob-trigger .fs-mob-trigger-btn{
    background:#f5f3ef !important;
    border-color:#e6e2db !important;
    color:#1c1a17 !important;
  }
  .fs-ph-mob-trigger .fs-mob-trigger-btn:active{
    background:#f0ede6 !important;
    border-color:#111 !important;
    transform:scale(0.985);
  }
  .fs-ph-mob-trigger .fs-ph-mob-sub{
    color:#111 !important;
    opacity:.75;
  }

  /* 5) Remove duplicate summary under trigger (sticky bar is the summary) */
  .fs-ph-mobile-stats{ display:none !important; }

  /* 2) Sticky bottom bar: more compact + safe area */
  .fs-sticky-cart{
    padding: 6px 14px calc(6px + env(safe-area-inset-bottom)) !important;
    min-height: 44px;
  }
  /* prevent content being hidden behind sticky bar (incl. safe area) */
  #fs-panel-2{ padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }

  /* 3) Photo cards: softer border + radius + subtle shadow (mobile only) */
  .fs-konfig-card{
    border: 1px solid #e7e7e7 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  }

  /* 4) Hide delete (X) on card — keep delete in drawer */
  .fs-konfig-delete-btn{ display:none !important; }

  /* Slightly reduce footer clutter */
  .fs-konfig-qty-btn{ border-color: rgba(0,0,0,.10) !important; }

  /* 6) Swipe affordances */
  .fs-konfig-card{ position: relative; }
  .fs-konfig-card::before{
    content:'';
    position:absolute;
    inset:0;
    background: transparent;
    pointer-events:none;
    transition: background .12s ease;
  }
  .fs-konfig-card.fs-swipe-right::before{
    background: linear-gradient(90deg, rgba(17,17,17,.10), transparent 55%);
  }
  .fs-konfig-card.fs-swipe-left::before{
    background: linear-gradient(270deg, rgba(220,38,38,.10), transparent 55%);
  }
  .fs-konfig-card.fs-swipe-right::after,
  .fs-konfig-card.fs-swipe-left::after{
    position:absolute;
    top: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 6px 10px;
    border-radius: 999px;
    pointer-events:none;
  }
  .fs-konfig-card.fs-swipe-right::after{
    content:'+1';
    left: 12px;
    background: rgba(17,17,17,.10);
    color:#111;
  }
  .fs-konfig-card.fs-swipe-left::after{
    content:'Izbriši';
    right: 12px;
    background: rgba(220,38,38,.10);
    color:#b91c1c;
  }
}


@media (max-width: 767px){
  /* Ensure photo list not hidden behind sticky bar */
  .fs-photos-layout .fs-pol-cards{ padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important; }
  /* Slightly tighter typography */
  .fs-photos-layout .fs-konfig-card-name{ font-size:16px; font-weight:600; }
  .fs-photos-layout .fs-konfig-card-sub{ font-size:13px; color:#6f6f6f; }
}


@media (max-width: 767px) {
  /* ── Standardne fotografije (photos) — dodatno poliranje (edge-to-edge + crop badge) ── */

  /* Daj prostor pod gridom, da sticky bar ne reže kartic */
  .fs-photos-layout .fs-pol-cards{
    padding-bottom: 140px;
  }

  /* Edge-to-edge fotka (brez notranjega paddinga) */
  .fs-photos-layout .fs-konfig-card{
    border-radius: 18px;
    overflow: hidden;
  }

  .fs-photos-layout .fs-konfig-card-thumb{
    padding: 0 !important;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: #f3f1ec;
  }

  .fs-photos-layout .fs-konfig-card-img{
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Premium crop badge (subtilen, zatemnjen) */
  .fs-photos-layout .fs-konfig-crop-badge{
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 9px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 4;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  /* Malo bolj v notranjost */
  .fs-photos-layout .fs-konfig-gear-btn{
    bottom: 14px;
    right: 14px;
  }
  .fs-photos-layout .fs-konfig-card-check{
    top: 14px;
    right: 14px;
  }
}

.fs-mob-section {
  padding: 14px 16px;
  border-bottom: 1px solid #f0ede6;
}
.fs-mob-section:last-child { border-bottom: none; }

/* ── CROP TOGGLE ── */
.fs-mob-crop-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.fs-mob-crop-toggle-label {
  font-size: 14px;
  color: #1c1a17;
  font-weight: 500;
}
.fs-mob-crop-toggle-btn {
  width: 44px; height: 26px;
  border-radius: 13px;
  border: none;
  background: #ddd;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.fs-mob-crop-toggle-btn.is-on {
  background: #E8AD61;
}
.fs-mob-crop-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.fs-mob-crop-toggle-btn.is-on .fs-mob-crop-toggle-knob {
  transform: translateX(18px);
}

/* ── POTRDI gumb v single drawer ── */
.fs-mob-confirm {
  width: 100%;
  border: none;
  background: #E8AD61;
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 8px;
}
.fs-mob-confirm:active { opacity: .85; }

/* ── PREPREČI ZOOM OB HITREM TAPANJU (double-tap zoom + pinch zoom) ── */
/* pan-x pan-y prepreči pinch zoom, manipulation prepreči double-tap zoom */
/* AMPAK: manipulation dovoli pinch — zato uporabimo pan-x pan-y povsod */
#foto-studio-app,
.fs-mob-drawer,
.fs-format-drawer {
  touch-action: pan-x pan-y;
}
#foto-studio-app button,
#foto-studio-app .fs-ph-act-btn,
#foto-studio-app .fs-qty-dec,
#foto-studio-app .fs-qty-inc,
#foto-studio-app .fs-opt,
#foto-studio-app .fs-mob-confirm,
#foto-studio-app .fs-mob-danger,
.fs-mob-drawer button,
.fs-mob-drawer .fs-opt,
.fs-mob-drawer .fs-konfig-qty-btn,
.fs-mob-drawer .fs-mob-confirm,
.fs-mob-drawer .fs-mob-danger,
.fs-mob-drawer .fs-mob-primary,
.fs-format-drawer button,
.fs-format-drawer .fs-opt {
  touch-action: pan-x pan-y;
}

/* ── POLAROID mobile kartica ── */
@media (max-width: 767px) {
  .fs-ph-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin-bottom: 16px;
  }

}\n\n@media (max-width:767px) {
  .fs-actions-row--mobile-only{ display:flex !important; }
}


/* ── Fullscreen size overlay ── */
.fs-size-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity .3s ease;
}
.fs-size-overlay.is-visible { opacity: 1; }
.fs-size-overlay__inner {
  background: #f2f2f7;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 40px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(40px);
  transition: transform .3s ease;
}
.fs-size-overlay.is-visible .fs-size-overlay__inner { transform: translateY(0); }
.fs-size-overlay__header {
  text-align: center;
  margin-bottom: 20px;
}
.fs-size-overlay__icon { margin-bottom: 10px; }
.fs-size-overlay__title {
  font-size: 20px;
  font-weight: 700;
  color: #1c1a17;
  margin: 0 0 6px;
}
.fs-size-overlay__sub {
  font-size: 13px;
  color: #888;
  margin: 0;
}
.fs-size-overlay__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.fs-size-overlay__btn {
  background: #fff;
  border: 1.5px solid #e5e5ea;
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fs-size-overlay__btn:active {
  background: #fff9f3;
  border-color: #E8A050;
}
.fs-size-overlay__name {
  font-size: 17px;
  font-weight: 700;
  color: #1c1a17;
}
.fs-size-overlay__price {
  font-size: 12px;
  color: #888;
}
.fs-size-overlay__skip {
  width: 100%;
  background: none;
  border: none;
  color: #888;
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
  text-decoration: underline;
}

/* Overlay step 2 — papir */
.fs-size-overlay__step {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 6px;
  text-align: center;
}
.fs-size-overlay__surf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.fs-size-overlay__surf-btn {
  background: #fff;
  border: 1.5px solid #e5e5ea;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fs-size-overlay__surf-btn:active {
  background: #fff9f3;
  border-color: #E8A050;
}
.fs-size-overlay__surf-name {
  font-size: 17px;
  font-weight: 600;
  color: #1c1a17;
}

/* ── Desktop overlay — centered modal ── */
@media (min-width: 768px) {
  .fs-size-overlay {
    align-items: center;
    justify-content: center;
  }
  .fs-size-overlay__inner {
    border-radius: 16px;
    width: 480px;
    max-width: 90vw;
    padding: 32px 32px 28px;
    transform: translateY(20px) scale(0.97);
  }
  .fs-size-overlay.is-visible .fs-size-overlay__inner {
    transform: translateY(0) scale(1);
  }
  .fs-size-overlay__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .fs-size-overlay__btn {
    padding: 16px 8px;
  }
  .fs-size-overlay__btn:hover {
    background: #fff9f3;
    border-color: #E8A050;
  }
}

/* ── Mobilni ikona toolbar ── */
@media (max-width: 767px) {
  /* Skrij zoom slider in stare mode gumbe */
  .fs-zoom-row { display: none !important; }
  .fs-mode-btn-row { display: none !important; }
  #fs-header-zoom { display: none !important; }

  /* Desktop footer — skrij na mobile */
  .fs-desktop-only-footer { display: none !important; }

  /* Filter strip — skrij privzeto, pokaže z ikono */
  .fs-filter-strip { display: none !important; }
  .fs-filter-strip.is-open { display: flex !important; }

  /* Ikona toolbar */
  .fs-mob-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 8px 8px;
    background: #2a2a2a;
    border-top: none;
    flex-shrink: 0;
    gap: 2px;
  }

  .fs-mob-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .fs-mob-tool-btn.is-active { color: #E8AD61; }
  .fs-mob-tool-btn.has-filter { color: #E8AD61; }

  .fs-mob-tool-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .fs-mob-price {
    font-size: 14px;
    font-weight: 700;
    color: #E8AD61;
    white-space: nowrap;
  }
  .fs-mob-toolbar .fs-qty-btn { width: 26px !important; height: 26px !important; font-size: 14px !important; }
  .fs-mob-toolbar .fs-qty-val { font-size: 13px !important; min-width: 14px !important; }
}

/* Desktop — skrij mobilni toolbar */
@media (min-width: 768px) {
  .fs-mob-toolbar { display: none !important; }
  .fs-mob-toolbar-bottom { display: none !important; }
  .fs-desktop-only-footer { display: flex !important; }
}

@media (max-width: 767px) {
  /* Skrij zgornji header — dimenzije in rotate so v toolbaru */
  .fs-editor-photo-header { display: none !important; }

  /* Toolbar vrstica 2 — cena + qty + potrdi */
  .fs-mob-toolbar-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
    background: #2a2a2a;
    border-top: none;
    flex-shrink: 0;
  }
  .fs-mob-price {
    font-size: 15px;
    font-weight: 700;
    color: #E8AD61;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .fs-mob-toolbar-bottom .fs-qty-inline { flex-shrink: 0; }
}

@media (max-width: 767px) {
  /* Skrij stari trigger bar */
  #fs-drawer-trigger-bar { display: none !important; }

  /* Filter strip — overlay čez sliko */
  .fs-filter-strip { display: none !important; }
  .fs-filter-strip.is-open {
    display: flex !important;
    position: absolute !important;
    bottom: 130px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 8px 10px !important;
  }
  .fs-editor-photo-panel { position: relative !important; }

  /* Toolbar bottom */
  .fs-mob-toolbar-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
    background: #2a2a2a;
    border-top: none;
    flex-shrink: 0;
  }

  /* Nastavitve gumb */
  .fs-mob-trigger-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    color: #fff;
  }
  .fs-mob-trigger-compact span { color: #fff !important; }
  .fs-mob-trigger-compact span[style*="color:#888"] { color: #aaa !important; }
}

/* Qty gumbi v temnem toolbaru */
@media (max-width: 767px) {
  .fs-mob-toolbar-bottom .fs-qty-btn {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .fs-mob-toolbar-bottom .fs-qty-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.6) !important;
  }
  .fs-mob-toolbar-bottom .fs-qty-val {
    color: #fff !important;
    font-size: 15px !important;
    min-width: 20px !important;
  }
}

@media (max-width: 767px) {
  .fs-mob-toolbar-bottom {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  .fs-mob-toolbar-bottom {
    justify-content: center !important;
    gap: 10px !important;
  }
  .fs-mob-trigger-compact {
    flex-shrink: 0 !important;
  }
  /* Potrdi gumb naj ne raste čez vse */
  .fs-mob-toolbar-bottom .fs-btn-primary {
    flex: 0 !important;
    white-space: nowrap !important;
    padding: 10px 18px !important;
  }
}

@media (max-width: 767px) {
  .fs-mob-toolbar-bottom {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .fs-mob-trigger-compact {
    min-width: 0 !important;
    max-width: 140px !important;
  }
  .fs-mob-trigger-compact span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Mobile adjustment panel */
@media (max-width: 767px) {
  .fs-mob-adj-panel {
    display: none !important;
  }
  .fs-mob-adj-panel.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    bottom: 130px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(20,20,20,0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 14px 16px 12px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  .fs-mob-adj-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
  }
  .fs-mob-adj-footer .fs-btn {
    flex: unset;
    padding: 8px 32px;
  }
  .fs-mob-adj-footer .fs-adj-reset-btn {
    order: -1;
  }
  .fs-mob-adj-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .fs-mob-adj-row label {
    font-size: 12px;
    color: #aaa;
    width: 76px;
    flex-shrink: 0;
  }
  .fs-mob-adj-row .fs-adj-slider {
    flex: 1;
    height: 3px;
    accent-color: #E8AD61;
  }
  .fs-mob-adj-row .fs-adj-val {
    font-size: 11px;
    color: #E8AD61;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
  }
  .fs-mob-adj-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
  }
}