/* Kolbo Product Slider Gallery PRO v1.1.0 */
.kolbo-psg{font-family:inherit;direction:rtl;margin:0 0 16px;display:grid;gap:12px;grid-template-columns:1fr}
.kolbo-psg *{box-sizing:border-box}

.kpsg-main{position:relative;background:var(--kpsg-surface);border:1px solid var(--kpsg-border);border-radius:var(--kpsg-radius);box-shadow:var(--kpsg-shadow);overflow:hidden}
.kpsg-stage{height:var(--kpsg-h-desktop);position:relative;outline:none;touch-action:pan-y}
@media(max-width:768px){.kpsg-stage{height:var(--kpsg-h-mobile)}}
.kpsg-stage:focus{outline:2px solid rgba(255,106,0,.55);outline-offset:-2px;border-radius:var(--kpsg-radius)}

.kpsg-slide{position:absolute;inset:0;opacity:0;transform:scale(1.01);transition:opacity .22s ease,transform .22s ease;display:grid;place-items:center;padding:10px}
.kpsg-slide[data-kpsg-active="1"]{opacity:1;transform:scale(1);z-index:2}
.kpsg-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:calc(var(--kpsg-radius) - 6px);background:#fff}

.kpsg-lightbox{display:grid;place-items:center;width:100%;height:100%;text-decoration:none}
.kpsg-zoom-hint{position:absolute;inset-inline-start:12px;bottom:10px;background:rgba(0,0,0,.58);color:#fff;font-size:12px;padding:6px 9px;border-radius:999px;pointer-events:none}

.kpsg-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.38);backdrop-filter:blur(6px);cursor:pointer;z-index:5;box-shadow:0 10px 22px rgba(0,0,0,.22)}
.kpsg-nav:hover{background:rgba(0,0,0,.50)}
.kpsg-nav:focus{outline:none;box-shadow:0 0 0 3px rgba(255,106,0,.28),0 10px 22px rgba(0,0,0,.22)}
.kpsg-prev{inset-inline-start:10px}
.kpsg-next{inset-inline-end:10px}
.kpsg-nav::before{content:"";display:block;width:10px;height:10px;margin:0 auto;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(45deg);opacity:.92}
.kpsg-next::before{transform:rotate(-135deg)}

.kpsg-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;align-items:center;z-index:6}
.kpsg-dot{width:9px;height:9px;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.25);cursor:pointer;padding:0}
.kpsg-dot:focus{outline:none;box-shadow:0 0 0 3px rgba(255,106,0,.28)}
.kpsg-dot[aria-selected="true"]{background:var(--kpsg-accent);border-color:transparent;box-shadow:0 0 0 3px rgba(255,106,0,.22)}

.kpsg-thumbs{display:grid;gap:var(--kpsg-gap);grid-template-columns:repeat(var(--kpsg-per-row,6),minmax(0,1fr))}
.kpsg-thumb{border:1px solid var(--kpsg-border);background:#fff;border-radius:14px;overflow:hidden;padding:6px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;height:calc(var(--kpsg-thumb) + 12px)}
.kpsg-thumb:hover{transform:translateY(-1px)}
.kpsg-thumb:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(255,106,0,.65)}
.kpsg-thumb.is-active{border-color:var(--kpsg-accent);box-shadow:inset 0 0 0 2px rgba(255,106,0,.65)}
.kpsg-thumb-img{width:100%;height:100%;object-fit:contain;display:block}

/* Side thumbs */
.kolbo-psg.kpsg-pos-left,.kolbo-psg.kpsg-pos-right{grid-template-columns:minmax(0,1fr) 160px;align-items:start}
.kolbo-psg.kpsg-pos-left .kpsg-thumbs,.kolbo-psg.kpsg-pos-right .kpsg-thumbs{grid-template-columns:1fr;max-height:var(--kpsg-h-desktop);overflow-y:auto; overflow-x:hidden;padding:2px}
.kolbo-psg.kpsg-pos-left .kpsg-thumbs{order:1}.kolbo-psg.kpsg-pos-left .kpsg-main{order:2}
.kolbo-psg.kpsg-pos-right .kpsg-thumbs{order:2}.kolbo-psg.kpsg-pos-right .kpsg-main{order:1}
@media(max-width:980px){
  .kolbo-psg.kpsg-pos-left,.kolbo-psg.kpsg-pos-right{grid-template-columns:1fr}
  .kolbo-psg.kpsg-pos-left .kpsg-thumbs,.kolbo-psg.kpsg-pos-right .kpsg-thumbs{max-height:none;grid-template-columns:repeat(var(--kpsg-per-row,6),minmax(0,1fr))}
}

.kolbo-psg:not(.kpsg-rtl){direction:ltr}

/* ===== Accessible Modal Lightbox (NO page shift) ===== */
.kpsg-modal[hidden]{display:none !important}
.kpsg-modal{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:16px;overscroll-behavior:contain}
.kpsg-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.kpsg-modal__dialog{position:relative;width:min(980px, calc(100vw - 32px));max-height:min(86dvh,760px);background:#0b0f14;border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.kpsg-modal__topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.12)}
.kpsg-modal__title{color:#fff;font-size:14px;opacity:.92}
.kpsg-modal__close{appearance:none;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;width:44px;height:44px;cursor:pointer}
.kpsg-modal__close:focus{outline:none;box-shadow:0 0 0 3px rgba(255,106,0,.28)}
.kpsg-modal__body{display:grid;place-items:center;padding:12px;overscroll-behavior:contain}
.kpsg-modal__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;background:#fff}


/* Modal open state (no layout shift) */
html.kpsg-modal-open{overscroll-behavior:contain;}


/* v1.1.2: Prevent layout shift when hovering/scrolling thumbnails (stable scrollbar + no horizontal overflow) */
.kolbo-psg, .kpsg-main, .kpsg-thumbs{max-width:100%;}
.kpsg-thumbs{overflow-x:hidden;}
.kpsg-thumb{min-width:0;}
.kpsg-thumb-img{max-width:100%;}


/* v1.1.3: Hard stop for unexpected horizontal shift (prevent body scrollbar + clip shadows) */
body.kpsg-has-gallery{overflow-x:hidden !important;}
.kolbo-psg{contain: layout paint; overflow-x: clip; max-width:100%;}
@supports not (overflow: clip){ .kolbo-psg{overflow-x:hidden;} }
.kpsg-thumbs{overflow-x: clip;}
@supports not (overflow: clip){ .kpsg-thumbs{overflow-x:hidden;} }


/* v1.1.4: Narrow layout to avoid wide spread causing shifts */
.kolbo-psg{width:min(100%, 720px); margin-inline:auto;}
@media (max-width: 860px){ .kolbo-psg{width:100%;} }
/* Reduce side thumbs column */
.kolbo-psg.kpsg-pos-left,.kolbo-psg.kpsg-pos-right{grid-template-columns:minmax(0,1fr) 124px;}
/* Thumbs: tighter grid */
.kpsg-thumbs{gap: calc(var(--kpsg-gap) * .75);}
.kpsg-thumb{border-radius:12px; padding:5px;}

.kpsg-main{max-width:100%;}


/* v1.1.5: Mobile anti-shift (prevent any horizontal overflow during scroll/preview) */
@media (max-width: 768px){
  html, body{overflow-x:hidden !important; width:100% !important;}
  body.kpsg-has-gallery{overflow-x:hidden !important;}
  .kolbo-psg{width:100% !important; max-width:100vw !important; margin-inline:0 !important;}
  .kpsg-main, .kpsg-thumbs, .kpsg-stage{max-width:100vw !important;}
  .kpsg-nav{max-width:44px;}
  .kpsg-modal{padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));}
}
