/* ═══════════════════════════════════════
   SHELL
   Per-instance values (bg, padding, gap, per_view)
   come in via CSS custom properties set as an
   inline style="" attribute on .ilc-shell / .ilc-outer
   — that's a normal HTML attribute, not a <style> block,
   so optimizers like WP Rocket's Remove Unused CSS never
   touch it.
═══════════════════════════════════════ */
.ilc-shell {
    width: 100%;
    background: var(--ilc-bg, transparent);
    padding: var(--ilc-pad, 16px);
    box-sizing: border-box;
    border-radius: 12px;
}
/* Default breakpoint. A custom "breakpoint" attribute only adds a small
   inline override (see PHP) when it differs from this default. */
@media (max-width: 700px) {
    .ilc-shell {
        padding: var(--ilc-pad-mobile, 10px);
    }
}
.ilc-outer {
    position: relative;
    width: 100%;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
}

/* ═══════════════════════════════════════
   TRACK & SLIDES
═══════════════════════════════════════ */
.ilc-track {
    display: flex;
    gap: var(--ilc-gap, 12px);
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    will-change: transform;
    cursor: grab;
}
.ilc-track.dragging {
    transition: none;
    cursor: grabbing;
}
.ilc-slide {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    cursor: zoom-in;
}
.ilc-track[data-multi="true"] .ilc-slide {
    width: calc((100% - (var(--ilc-pv, 1) - 1) * var(--ilc-gap, 12px)) / var(--ilc-pv, 1));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}
.ilc-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: transform 0.3s ease;
}
.ilc-track[data-multi="true"] .ilc-slide img {
    border-radius: 12px;
}
.ilc-slide:hover img {
    transform: scale(1.012);
}

/* ═══════════════════════════════════════
   DOTS
═══════════════════════════════════════ */
.ilc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 0 6px;
}
.ilc-dots .ilc-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(0,0,0,0.20);
    border: none; padding: 0;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}
.ilc-dots .ilc-dot.active {
    background: #3b3b13;
    transform: scale(1.4);
}

/* ═══════════════════════════════════════
   LIGHTBOX  (injected into <body> by JS)
═══════════════════════════════════════ */
.ilc-lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,0.82);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: zoom-out;
}
.ilc-lb-overlay.open {
    display: flex !important;
}
.ilc-lb-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    max-width: min(700px, 78vw);
    max-height: calc(100vh - 110px);
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    box-sizing: border-box;
    flex-shrink: 0;
}
.ilc-lb-card img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    transition: opacity 0.18s;
}
.ilc-lb-card .ilc-lb-close {
    position: absolute;
    top: -13px; right: -13px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #bbb;
    color: #444;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    padding: 0;
    transition: background 0.18s, color 0.18s;
}
.ilc-lb-card .ilc-lb-close:hover { background:#333; color:#fff; border-color:#333; }
.ilc-lb-overlay .ilc-lb-prev,
.ilc-lb-overlay .ilc-lb-next {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.28);
    color: #fff;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 4;
    padding: 0;
    transition: background 0.18s;
}
.ilc-lb-overlay .ilc-lb-prev:hover,
.ilc-lb-overlay .ilc-lb-next:hover { background: rgba(255,255,255,0.28); }
.ilc-lb-overlay .ilc-lb-prev { left: 14px; }
.ilc-lb-overlay .ilc-lb-next { right: 14px; }
.ilc-lb-overlay .ilc-lb-prev svg,
.ilc-lb-overlay .ilc-lb-next svg { width: 18px; height: 18px; display:block; }
.ilc-lb-overlay .ilc-lb-count {
    position: fixed;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    font: 13px/1 sans-serif;
    color: rgba(255,255,255,0.65);
    pointer-events: none;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .ilc-lb-card { max-width: 94vw; margin-top: 55px; }
    .ilc-lb-overlay .ilc-lb-prev { left: 5px; }
    .ilc-lb-overlay .ilc-lb-next { right: 5px; }
}