/* ================================================================
   FEF IMAGE SLIDER
   ================================================================ */
.fef-is-wrap { position: relative; width: 100%; border-radius: 8px; }
.fef-is-wrap:not(.fef-is-has-panel) { overflow: hidden; }
.fef-is-viewport { position: relative; width: 100%; height: 400px; overflow: hidden; }
.fef-is-track {
    display: flex;
    height: 100%;
    will-change: transform;
}
.fef-is-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Blurred Background ── */
.fef-is-bg-blur {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.fef-is-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.fef-is-bg-solid,
.fef-is-bg-static {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── Main Image ── */
.fef-is-img {
    position: relative;
    z-index: 2;
    display: block;
}
/* Contain — show entire image, never crop, background shows in empty space */
.fef-is-img.fit-contain {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Cover — fill entire area, crop excess */
.fef-is-img.fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fill — stretch to fill */
.fef-is-img.fit-fill {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/* None — original size centered */
.fef-is-img.fit-none {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: none;
}

/* ── Text Overlay ── */
.fef-is-text-wrap {
    position: absolute;
    z-index: 3;
    left: 0; right: 0;
    background: rgba(0,0,0,0.6);
    padding: 12px 20px;
}
.fef-is-text-bottom { bottom: 0; }
.fef-is-text-top { top: 0; }
.fef-is-text-center { top: 50%; transform: translateY(-50%); text-align: center; }
.fef-is-text-left { top: 0; bottom: 0; right: auto; width: 40%; display: flex; align-items: center; }
.fef-is-text-right { top: 0; bottom: 0; left: auto; width: 40%; display: flex; align-items: center; justify-content: flex-end; }
.fef-is-text { color: #fff; font-size: 15px; line-height: 1.5; }

/* ── Arrows ── */
.fef-is-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}
.fef-is-viewport:hover .fef-is-arrow { opacity: 1; }
.fef-is-arrow:hover { background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.08); }
.fef-is-prev { left: 12px; }
.fef-is-next { right: 12px; }

/* ── Dots ── */
.fef-is-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 6px;
    align-items: center;
}
.fef-is-dot {
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
}
.fef-is-dot.active {
    background: #fff;
    width: 20px;
}

/* ── Counter ── */
.fef-is-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

/* ── Fullscreen Button ── */
.fef-is-fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}
.fef-is-viewport:hover .fef-is-fullscreen { opacity: 1; }
.fef-is-fullscreen:hover { background: rgba(0,0,0,0.7); }

/* ================================================================
   LIGHTBOX
   ================================================================ */
.fef-is-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fefIsLbIn 0.3s ease;
    padding-bottom: 70px; /* reserve space for bottom thumbs */
}
@keyframes fefIsLbIn { from { opacity: 0; } to { opacity: 1; } }

.fef-is-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 0;
}

.fef-is-lb-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.fef-is-lb-close:hover { background: rgba(255,255,255,0.2); }

/* Top bar — play button + counter */
.fef-is-lb-top-bar {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Play button positions */
.fef-is-lb-pos-top-left { top: 16px; left: 16px; }
.fef-is-lb-pos-top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.fef-is-lb-pos-top-right { top: 16px; right: 60px; }
.fef-is-lb-pos-bottom-left { bottom: 80px; left: 16px; }
.fef-is-lb-pos-bottom-center { bottom: 80px; left: 50%; transform: translateX(-50%); }

.fef-is-lb-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    padding: 0;
}
.fef-is-lb-play:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); transform: scale(1.08); }
.fef-is-lb-play.playing { background: rgba(59,130,246,0.5); border-color: transparent; }
.fef-is-lb-play.playing:hover { background: rgba(59,130,246,0.7); }

/* Ring timer SVG — overlaid on play button */
.fef-is-ring-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
    z-index: 2;
}
.fef-is-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 2.5;
}
.fef-is-ring-progress {
    fill: none;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke 0.2s;
}
.fef-is-lb-play.playing .fef-is-ring-progress {
    stroke: #93c5fd;
}
.fef-is-lb-play.playing .fef-is-ring-bg {
    stroke: rgba(59,130,246,0.25);
}

/* Play icon inside ring — centered */
.fef-is-lb-play-icon {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fef-is-lb-top-bar .fef-is-lb-counter {
    position: static;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 14px;
}

.fef-is-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.fef-is-lb-arrow:hover { background: rgba(255,255,255,0.2); }
.fef-is-lb-prev { left: 16px; }
.fef-is-lb-next { right: 16px; }

.fef-is-lb-img-wrap {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fef-is-lb-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
    will-change: transform, opacity;
}

.fef-is-lb-counter {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-weight: 500;
}

/* ── Lightbox Thumbs — bottom-fixed, full width, centered ── */
.fef-is-lb-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
}
.fef-is-lb-thumbs::-webkit-scrollbar { display: none; }
/* When thumbs overflow, align left so scroll makes sense */
.fef-is-lb-thumbs.fef-is-lb-thumbs-overflow {
    justify-content: flex-start;
}
.fef-is-lb-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 40px;
    min-width: 56px;
    min-height: 40px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
    transform-origin: center bottom;
    position: relative;
    box-sizing: border-box;
}
.fef-is-lb-thumb.active { border-color: #fff; opacity: 1; transform: scale(1.1); }
.fef-is-lb-thumb:hover { opacity: 0.9; }
.fef-is-lb-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.25s;
}
.fef-is-lb-thumb:hover img { transform: scale(1.1); }

/* Fisheye container — extra padding for scaled thumbs */
.fef-is-lb-fisheye {
    padding-top: 14px;
    padding-bottom: 8px;
}
.fef-is-lb-fisheye .fef-is-lb-thumb {
    transform-origin: center bottom;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .fef-is-arrow { opacity: 1; width: 34px; height: 34px; font-size: 14px; }
    .fef-is-prev { left: 6px; }
    .fef-is-next { right: 6px; }
    .fef-is-lb-arrow { width: 36px; height: 36px; font-size: 16px; }
    .fef-is-lb-prev { left: 8px; }
    .fef-is-lb-next { right: 8px; }
    .fef-is-lb-img { max-height: 60vh; }
    .fef-is-lb-thumbs { padding: 8px 10px 10px; gap: 4px; }
    .fef-is-lb-thumb { width: 44px; height: 32px; min-width: 44px; min-height: 32px; }
    .fef-is-lightbox { padding-bottom: 56px; }
}

/* ── Thumbnails Strip ── */
.fef-is-thumbstrip{display:flex;gap:var(--th-gap,6px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:6px 0}
.fef-is-thumbstrip::-webkit-scrollbar{display:none}
.fef-is-thumbstrip-left,.fef-is-thumbstrip-right{flex-direction:column;overflow-y:auto;overflow-x:hidden;max-height:100%}
.fef-is-with-vthumb{display:flex}
.fef-is-thumb-left{flex-direction:row}
.fef-is-thumb-right{flex-direction:row-reverse}
.fef-is-with-vthumb .fef-is-viewport{flex:1;min-width:0}
.fef-is-with-vthumb .fef-is-thumbstrip{flex:none;width:auto}
/* Overlay thumbnails */
.fef-is-thumbstrip-overlay_bottom,.fef-is-thumbstrip-overlay_top,.fef-is-thumbstrip-overlay_left,.fef-is-thumbstrip-overlay_right{position:absolute;z-index:15;background:rgba(0,0,0,.4);padding:6px;border-radius:6px;backdrop-filter:blur(4px)}
.fef-is-thumbstrip-overlay_bottom{bottom:10px;left:50%;transform:translateX(-50%);flex-direction:row}
.fef-is-thumbstrip-overlay_top{top:10px;left:50%;transform:translateX(-50%);flex-direction:row}
.fef-is-thumbstrip-overlay_left{left:10px;top:50%;transform:translateY(-50%);flex-direction:column}
.fef-is-thumbstrip-overlay_right{right:10px;top:50%;transform:translateY(-50%);flex-direction:column}
.fef-is-thumb{width:var(--th-size,70px);height:var(--th-size,70px);min-width:var(--th-size,70px);min-height:calc(var(--th-size,70px)*.6);background-size:cover;background-position:center;border-radius:var(--th-rad,4px);cursor:pointer;opacity:var(--th-opacity,.6);border:2px solid transparent;transition:all .2s;flex-shrink:0;position:relative}
.fef-is-thumb:hover{opacity:1}
.fef-is-thumb.active{opacity:1;border-color:var(--th-border,#2e7d32)}
.fef-is-thumb-yt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);border-radius:inherit;color:#fff;font-size:14px}

/* ── YouTube ── */
.fef-is-yt-thumb{width:100%;height:100%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fef-is-yt-play{width:60px;height:42px;background:rgba(255,0,0,.85);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:background .2s}
.fef-is-yt-thumb:hover .fef-is-yt-play{background:rgba(255,0,0,1)}

/* ── Item Info Overlay ── */
.fef-is-info{padding:10px 14px;color:#fff;z-index:5;pointer-events:none}
.fef-is-info-overlay_bottom{position:absolute;bottom:0;left:0;right:0;z-index:5;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.fef-is-info-overlay_full{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:flex-end}
.fef-is-info-below{position:relative;z-index:5;background:#fff;color:#333;padding:10px 0}
.fef-is-info-hover{position:absolute;bottom:0;left:0;right:0;z-index:5;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .3s;padding:12px 14px}
.fef-is-slide:hover .fef-is-info-hover,.fef-is-gal-item:hover .fef-is-info-hover{opacity:1}
.fef-is-info-link{pointer-events:auto}
.fef-is-info-title{font-weight:700;font-size:15px;margin-bottom:4px}
.fef-is-info-caption{font-size:13px;opacity:.9;margin-bottom:4px;font-style:italic}
.fef-is-info-desc{font-size:13px;opacity:.85;margin-bottom:4px;line-height:1.4}
.fef-is-info-tag{display:inline-block;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:10px;font-size:11px;margin-right:6px}
.fef-is-info-meta{font-size:12px;opacity:.7;margin-right:8px}
.fef-is-info-meta i{margin-right:3px}
.fef-is-info-link{color:#90caf9;font-size:13px;text-decoration:none;font-weight:500}

/* ── Magnify Inline ── */
.fef-is-magnify-lens{position:absolute;pointer-events:none;z-index:20;border:2px solid rgba(255,255,255,.6);background-repeat:no-repeat;display:none;box-shadow:0 0 8px rgba(0,0,0,.2)}
.fef-is-magnify-lens.circle{border-radius:50%}
.fef-is-magnify-lens.square{border-radius:4px}
/* Magnify Panel */
.fef-is-magnify-panel{position:absolute;top:0;z-index:20;background:#fff no-repeat;display:none;overflow:hidden;border-radius:6px}

/* ── Gallery Grid ── */
.fef-is-gallery-wrap{}
.fef-is-gal-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:flex-start}
.fef-is-gal-cat{padding:5px 14px;background:#f0f0f0;border:none;border-radius:16px;font-size:13px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.fef-is-gal-cat:hover,.fef-is-gal-cat.active{background:#2e7d32;color:#fff}
.fef-is-gal-cat-count{font-size:11px;opacity:.75}

/* Pills tree-grouping (parent + children) */
.fef-is-gal-cat-group{display:inline-flex;flex-direction:column;gap:4px;background:#fafafa;padding:6px;border-radius:10px;border:1px solid #eee}
.fef-is-gal-cat-parent{font-weight:600}
.fef-is-gal-cat-children{display:flex;flex-wrap:wrap;gap:4px;padding-left:6px;border-left:2px solid #ddd}
.fef-is-gal-cat-child{font-size:12px;padding:3px 10px;background:#fff;border:1px solid #e5e5e5}

/* ─── Sidebar layout (with slide-out animation) ─── */
/* Use grid for cleaner column-width animation than flex */
.fef-is-gal-has-sidebar{
    display:grid;
    grid-template-columns: var(--fef-sidebar-w, 220px) 1fr;
    gap: var(--fef-sidebar-gap, 20px);
    align-items:flex-start;
    position:relative;
    transition: grid-template-columns .35s cubic-bezier(.4, 0, .2, 1), gap .35s cubic-bezier(.4, 0, .2, 1);
}

/* Sidebar — slides out on transform, AND its column collapses for grid expansion */
.fef-is-gal-sidebar{
    background:#fafafa;
    border:1px solid #eaeaea;
    border-radius:8px;
    padding:12px;
    max-height:600px;
    overflow-y:auto;
    position:sticky;
    top:20px;
    min-width: 0;        /* allow it to shrink to 0 */
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
    will-change: transform, opacity;
}
.fef-is-gal-main{
    min-width:0;          /* prevents grid items from overflowing */
}

/* ─── Eye-toggle button (in toolbar above grid) ─── */
.fef-is-gal-eye-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:1px solid #ddd;
    color:#444; cursor:pointer;
    font-size:14px;
    transition: background .15s, border-color .15s, transform .15s;
    position:relative;
}
.fef-is-gal-eye-toggle:hover{ background:#f0f6fc; border-color:#2271b1; transform:scale(1.04); }
.fef-is-gal-eye-toggle .fef-eye-open{ display:inline-block; }
.fef-is-gal-eye-toggle .fef-eye-closed{ display:none; }
/* When sidebar is collapsed → swap icons */
.fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed .fef-is-gal-eye-toggle .fef-eye-open{ display:none; }
.fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed .fef-is-gal-eye-toggle .fef-eye-closed{ display:inline-block; }
.fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed .fef-is-gal-eye-toggle{ background:#2271b1; border-color:#2271b1; color:#fff; }

/* ─── Collapsed sidebar state ─── */
.fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed.fef-is-gal-has-sidebar{
    grid-template-columns: 0 1fr;
    gap: 0;
}
.fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed .fef-is-gal-sidebar{
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
}

.fef-is-gal-cat-checkboxes{display:flex;flex-direction:column;gap:4px}
.fef-is-gal-cat-header{font-weight:600;font-size:13px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #e5e5e5;color:#444}
.fef-is-gal-cat-cb,.fef-is-gal-cat-all{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;padding:3px 4px;border-radius:4px;transition:background .15s}
.fef-is-gal-cat-cb:hover,.fef-is-gal-cat-all:hover{background:#fff}
.fef-is-gal-cat-cb input,.fef-is-gal-cat-all input{margin:0;cursor:pointer;flex:0 0 auto}
.fef-is-gal-cat-cb-parent{font-weight:600;margin-top:2px}
.fef-is-gal-cat-cb-child{font-weight:400;font-size:12.5px;color:#555;padding-left:calc(var(--cb-depth, 1) * 16px)}
.fef-is-gal-cat-all{border-bottom:1px dashed #ddd;padding-bottom:6px;margin-bottom:6px;font-weight:600}
.fef-is-gal-cat-label{flex:1 1 auto}
.fef-is-gal-cat-count{font-size:11px;opacity:.75;flex:0 0 auto;order:99;margin-left:auto}

/* ── Category count positioning (visitor-facing settings → Style → Category Count) ──
   The wrap div gets a class like `fef-cn-pos-right_of_label`, `fef-cn-pos-before_toggle`,
   `fef-cn-pos-center`, `fef-cn-pos-far_right`, or `fef-cn-pos-left_of_label`.
   These overrides change the count's behavior inside the flex row.
   See docs in FEF_Image_Slider_Widget.php (gn_position control) for option meanings. */

/* RIGHT OF LABEL (compact, recommended default for parents with toggle):
   Count sits immediately after the title text — no margin-left:auto, label doesn't grow. */
.fef-is-gallery-wrap.fef-cn-pos-right_of_label .fef-is-gal-cat-count{
    margin-left: 6px;
    order: 0;            /* natural DOM order */
    /* margin-left override comes from the gn_gap Elementor control with !important */
}
.fef-is-gallery-wrap.fef-cn-pos-right_of_label .fef-is-gal-cat-label{
    flex: 0 0 auto;      /* don't push the count away */
}
/* For parent rows that have the toggle, the leftover space goes between the label-group and the toggle */
.fef-is-gallery-wrap.fef-cn-pos-right_of_label .fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb{
    flex: 0 1 auto;
    margin-right: auto;
}

/* BEFORE TOGGLE: count pushed to right of label so it visually touches the toggle button */
.fef-is-gallery-wrap.fef-cn-pos-before_toggle .fef-is-gal-cat-count{
    margin-left: auto;   /* push to right edge of label */
    order: 99;
}
.fef-is-gallery-wrap.fef-cn-pos-before_toggle .fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb{
    flex: 1 1 auto;      /* label container fills row, count drifts to right */
    margin-right: 4px;   /* small gap before toggle */
}

/* CENTER between label and toggle:
   Pull the label to a no-grow width and let the count sit centered in remaining space.
   Implemented with two margin-auto's on the count itself. */
.fef-is-gallery-wrap.fef-cn-pos-center .fef-is-gal-cat-count{
    margin-left: auto;
    margin-right: auto;
    order: 99;
}
.fef-is-gallery-wrap.fef-cn-pos-center .fef-is-gal-cat-label{
    flex: 0 0 auto;
}
.fef-is-gallery-wrap.fef-cn-pos-center .fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb{
    flex: 1 1 auto;
}

/* FAR RIGHT — original (default behavior, no overrides needed beyond base CSS). */

/* LEFT OF LABEL: count appears before the title text */
.fef-is-gallery-wrap.fef-cn-pos-left_of_label .fef-is-gal-cat-count{
    order: -1;
    margin-left: 0;
    margin-right: 6px;
}

/* Mobile: stack sidebar above the grid */
@media (max-width:768px){
    .fef-is-gal-has-sidebar{ grid-template-columns: 1fr; }
    .fef-is-gal-sidebar{ max-height:none; position:relative; top:auto; }
    /* On mobile, collapsed sidebar slides up */
    .fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed.fef-is-gal-has-sidebar{
        grid-template-columns: 1fr;
        grid-template-rows: 0 1fr;
        gap: 0;
    }
    .fef-is-gallery-wrap.fef-is-gal-sidebar-collapsed .fef-is-gal-sidebar{
        transform: translateY(-110%);
    }
}

/* ─── Search box ─── */
.fef-is-gal-search{
    position:relative;
    display:inline-flex; align-items:center;
    flex:1 1 220px;
    max-width:380px;
    min-width:160px;
}
.fef-is-gal-search-input{
    width:100%;
    padding:8px 32px 8px 36px;
    border:1px solid #ddd;
    border-radius:24px;
    background:#fff;
    font-size:14px;
    transition:border-color .15s, box-shadow .15s;
    outline:none;
    box-sizing:border-box;
}
.fef-is-gal-search-input:focus{
    border-color:#2271b1;
    box-shadow:0 0 0 3px rgba(34,113,177,.15);
}
.fef-is-gal-search-icon{
    position:absolute; left:13px;
    color:#888; font-size:13px;
    pointer-events:none;
}
.fef-is-gal-search-clear{
    position:absolute; right:8px;
    width:22px; height:22px;
    border:none; background:rgba(0,0,0,.08);
    color:#444;
    border-radius:50%;
    cursor:pointer;
    font-size:16px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
}
.fef-is-gal-search-clear:hover{ background:rgba(0,0,0,.18); }
.fef-is-gal-item.fef-gal-search-hidden{ display:none; }
.fef-is-gal-item.fef-is-gal-loading-lb{ opacity:.55; pointer-events:none; transition:opacity .15s }
.fef-is-gal-search-input.searching{ background-image: linear-gradient(90deg, #fff, #f0f6fc, #fff); background-size: 200% 100%; animation: fef-search-pulse 1s ease-in-out infinite; }
@keyframes fef-search-pulse{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
.fef-is-gal-no-results{
    grid-column: 1 / -1;
    column-span: all;
    padding: 60px 20px;
    text-align: center;
    color: #888;
    font-size: 15px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed #ddd;
}

/* ─── Numbered pagination ─── */
.fef-is-gal-pager-wrap{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    margin:28px 0 12px;
}
.fef-is-gal-pager{
    display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center;
}
.fef-is-gal-pager-btn{
    min-width:38px; height:38px; padding:0 10px;
    border:1px solid #ddd; background:#fff; color:#333;
    border-radius:6px; cursor:pointer;
    font-size:14px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:all .15s;
}
.fef-is-gal-pager-btn:hover:not(:disabled){
    background:#f0f6fc; border-color:#2271b1; color:#2271b1;
}
.fef-is-gal-pager-btn:disabled{ opacity:.4; cursor:not-allowed; }
.fef-is-gal-pager-current,
.fef-is-gal-pager-current:hover{
    background:#2271b1 !important; color:#fff !important; border-color:#2271b1 !important;
    cursor:default;
}
.fef-is-gal-pager-first,.fef-is-gal-pager-last,
.fef-is-gal-pager-prev,.fef-is-gal-pager-next{ font-size:12px; }
.fef-is-gal-pager-ellipsis{ padding:0 4px; color:#888; user-select:none; }

.fef-is-gal-pager-meta{
    display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
    font-size:13px; color:#666;
}
.fef-is-gal-pager-summary strong{ color:#1d2327; }
.fef-is-gal-pager-jump{
    display:inline-flex; align-items:center; gap:6px;
}
.fef-is-gal-pager-jump label{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#666; margin:0;
}
.fef-is-gal-pager-jump-input{
    width:64px; padding:6px 8px;
    border:1px solid #ddd; border-radius:4px;
    font-size:13px; text-align:center;
    -moz-appearance:textfield;
}
.fef-is-gal-pager-jump-input::-webkit-outer-spin-button,
.fef-is-gal-pager-jump-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.fef-is-gal-pager-jump-input:focus{
    outline:none; border-color:#2271b1; box-shadow:0 0 0 2px rgba(34,113,177,.2);
}
.fef-is-gal-pager-jump-btn{
    padding:6px 14px;
    background:#fff; border:1px solid #2271b1; color:#2271b1;
    border-radius:4px; cursor:pointer;
    font-size:13px;
    transition:all .15s;
}
.fef-is-gal-pager-jump-btn:hover{ background:#2271b1; color:#fff; }

/* Toolbar (eye + search + total + per-page dropdown) */
.fef-is-gal-toolbar{
    display:flex; align-items:center;
    gap:12px; margin-bottom:14px; flex-wrap:wrap;
}
.fef-is-gal-total{ font-size:13px; color:#444; }
.fef-is-gal-perpage{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#444; margin-left:auto; }
.fef-is-gal-perpage select{ padding:5px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; font-size:13px; cursor:pointer; }
.fef-is-gal-perpage select:focus{outline:none;border-color:#2e7d32}

/* ── Sort-by dropdown ────────────────────────────────────────────────────────
   Three placements:
     1. .fef-sort-in-top_grid → lives in the toolbar above the grid, inline layout
                                matching the per-page dropdown style.
     2. .fef-sort-in-sidebar  → lives at the top or bottom of the left filters panel,
                                full-width stacked layout (label above select), with
                                spacing that visually separates it from the category list.
   The wrapping element is a <label> so clicking the label focuses the <select>.
*/

/* Base styles shared by both placements */
.fef-is-gal-sort{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#444; }
.fef-is-gal-sort select{ padding:5px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; font-size:13px; cursor:pointer; min-width:120px; }
.fef-is-gal-sort select:focus{ outline:none; border-color:#2271b1; box-shadow:0 0 0 2px rgba(34,113,177,.2); }

/* ── Toolbar placement (top_grid) — matches per-page/grid-sel inline style ── */
.fef-is-gal-sort.fef-sort-in-top_grid{ /* base inline styles already applied */ }

/* ── Sidebar placement — full-width stacked block ── */
.fef-is-gal-sort.fef-sort-in-sidebar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    width:100%;
    padding:10px 0;
}
.fef-is-gal-sort.fef-sort-in-sidebar .fef-is-gal-sort-label{
    font-weight:600;
    font-size:13px;
    color:inherit;
}
.fef-is-gal-sort.fef-sort-in-sidebar select{
    width:100%;
    min-width:0;
    padding:8px 10px;
}
/* When sort is at the TOP of sidebar, add a separator line below it to divide from categories */
.fef-is-gal-sidebar > .fef-is-gal-sort.fef-sort-in-sidebar:first-child{
    border-bottom:1px solid #eaeaea;
    margin-bottom:10px;
    padding-bottom:12px;
}
/* When sort is at the BOTTOM of sidebar, add a separator line above it */
.fef-is-gal-sidebar > .fef-is-gal-sort.fef-sort-in-sidebar:last-child{
    border-top:1px solid #eaeaea;
    margin-top:10px;
    padding-top:12px;
}
/* When sidebar is collapsed, hide sort dropdown inside it too */
.fef-is-gal-sidebar-collapsed .fef-is-gal-sort.fef-sort-in-sidebar{ display:none; }

/* ─── Grid Selector ─── */
.fef-is-gal-gridsel{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#444; }
.fef-is-gal-gridsel select{ padding:5px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; font-size:13px; cursor:pointer; min-width:60px; }
.fef-is-gal-gridsel select:focus{ outline:none; border-color:#2271b1; box-shadow:0 0 0 2px rgba(34,113,177,.2); }

.fef-is-gal-grid{display:grid;grid-template-columns:repeat(var(--gal-cols,3),1fr);gap:var(--gal-gap,6px)}

/* ── MASONRY LAYOUT — round-robin Pinterest masonry ──────────────────────
 * Behavior:
 *   • Fixed number of columns (--gal-cols)
 *   • Each column has equal width; items inside keep their natural aspect ratio
 *   • Items are distributed to columns in round-robin order: item 1 → col 1,
 *     item 2 → col 2, item 3 → col 3, item 4 → col 1, etc.
 *   • Each column stacks its assigned items top-to-bottom with consistent gap
 *   • Result: visual fill order goes LEFT-TO-RIGHT across columns, then top-to-bottom
 *     — matching what visitors expect when Load More appends new items
 *
 * Implementation:
 *   The container is `position:relative` and items are `position:absolute`,
 *   placed by JS. We compute column width once, set every item's width, then
 *   walk items in DOM order and place item N at column (N % cols), stacking
 *   on the column's current bottom edge. Container height = max(column heights).
 * ─────────────────────────────────────────────────────────────────────── */
.fef-is-gal-masonry{
    position: relative;
    display: block;
    column-count: unset;
    column-gap: unset;
    /* height: set inline by JS after layout */
}
.fef-is-gal-masonry .fef-is-gal-item{
    position: absolute;
    /* top, left, width, height: set by JS */
    margin: 0;
    overflow: hidden;          /* don't let inner content (info overlay etc) expand the cell */
    /* Hidden until JS positions the item, so visitors don't see items briefly
       stacked at (0,0) before they get placed. */
    opacity: 0;
    transition: opacity .2s ease;
}
.fef-is-gal-masonry .fef-is-gal-item.fef-mas-placed{
    opacity: 1;
}
.fef-is-gal-masonry .fef-is-gal-img{
    width: 100%;
    height: auto;              /* render at natural aspect ratio — never crop */
    display: block;
    /* No object-fit. The image renders at (cellWidth × naturalRatio) automatically.
     * JS forces the cell height to that same value via math, so they match exactly:
     *   • cell height = (naturalH / naturalW) × colWidth
     *   • image height = (width:100% → colWidth) × (naturalH / naturalW) = same value
     * Result: zero cropping (no object-fit anywhere), zero gaps (cell matches image). */
}
/* Filter-hidden items don't take vertical space in the layout */
.fef-is-gal-masonry .fef-is-gal-item.fef-gal-hidden,
.fef-is-gal-masonry .fef-is-gal-item.fef-gal-search-hidden{
    display: none !important;
}

/* ── Initial-layout loader ──────────────────────────────────────────────
 * Shown while the masonry algorithm is computing positions on first page load.
 * The grid itself is hidden (opacity:0) during this time so visitors don't see
 * items popping into incorrect positions then shifting around.
 *
 * When JS finishes the final settling pass (~2s after init), it adds the class
 * `.fef-mas-ready` to the wrap. CSS transitions handle the overlay fade-out
 * and grid fade-in — no jarring snap, looks like a smooth reveal.
 */
.fef-is-gal-grid-wrap{
    position: relative;
    /* min-height during loading so the page doesn't collapse before items appear */
    min-height: 300px;
}
.fef-is-gal-grid-wrap .fef-is-gal-grid{
    opacity: 0;
    transition: opacity .35s ease;
}
.fef-is-gal-grid-wrap.fef-mas-ready .fef-is-gal-grid{
    opacity: 1;
}
.fef-is-gal-init-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #fff;
    z-index: 10;
    transition: opacity .35s ease, visibility 0s linear .35s;
    min-height: 300px;
    color: #555;
    font-size: 14px;
}
.fef-is-gal-grid-wrap.fef-mas-ready .fef-is-gal-init-overlay{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.fef-is-gal-init-spinner{
    width: 36px;
    height: 36px;
    border: 3px solid #e5e5e5;
    border-top-color: #2e7d32;       /* matches Load More button green */
    border-radius: 50%;
    animation: fef-init-spin 0.8s linear infinite;
}
@keyframes fef-init-spin{
    to { transform: rotate(360deg); }
}
.fef-is-gal-init-msg{
    font-weight: 500;
    text-align: center;
    padding: 0 16px;
}

.fef-is-gal-equal .fef-is-gal-item{aspect-ratio:1}
.fef-is-gal-natural .fef-is-gal-img{width:100%;height:auto}
.fef-is-gal-item{position:relative;overflow:hidden;border-radius:6px;cursor:pointer;transition:transform .2s}
.fef-is-gal-item:hover{transform:scale(1.02)}
.fef-is-gal-item.fef-gal-hidden,
.fef-is-gal-item.fef-gal-pending{display:none}
.fef-is-gal-img{width:100%;height:100%;object-fit:contain;display:block;background:#f5f5f5}
.fef-is-gal-thumb{width:100%;padding-top:56.25%;background-size:cover;background-position:center;position:relative}

/* Load More button */
.fef-is-gal-loadmore-wrap{display:flex;justify-content:center;align-items:center;margin:20px 0;flex-wrap:wrap;gap:10px}

/* ── Loading status message ─────────────────────────────────────────────
 * Shown above the Load More button to reassure visitors during the brief
 * delay between clicking the button and seeing new images appear (AJAX
 * round-trip + masonry layout settle = ~1-3 seconds typically).
 *
 * Hidden by default (visually); JS adds `.is-visible` while loading.
 * `width: 100%` forces it onto its own row inside the flex-wrap container,
 * so it appears ABOVE the button without changing the wrap's flex direction.
 */
.fef-is-gal-loadmore-status{
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #666;
    padding: 4px 8px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .25s ease, max-height .25s ease;
    pointer-events: none;
}
.fef-is-gal-loadmore-status.is-visible{
    opacity: 1;
    max-height: 60px;       /* enough for one or two lines */
}
.fef-is-gal-loadmore{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:#2e7d32;color:#fff;border:1px solid transparent;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:180px;justify-content:center}
.fef-is-gal-loadmore:hover{background:#1b5e20;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.fef-is-gal-loadmore:active{transform:translateY(0)}
.fef-is-gal-loadmore i{transition:transform .2s ease;font-size:14px}
.fef-is-gal-loadmore:hover i{transform:translateY(2px)}

/* ── Loading spinner — appears next to the icon when button is in .loading state ──
 * Pure CSS spinning ring; no images, no JS animation. The element is hidden by
 * default and only shown when JS adds the `.loading` class during an AJAX request.
 * The icon hides to make room (otherwise we'd have both icon and spinner spinning).
 */
.fef-is-gal-loadmore-spinner{
    display: none;                 /* hidden when button is idle */
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;        /* the "moving" part of the ring */
    border-radius: 50%;
    animation: fef-loadmore-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.fef-is-gal-loadmore.loading .fef-is-gal-loadmore-spinner{
    display: inline-block;
}
.fef-is-gal-loadmore.loading i{
    display: none;                 /* hide the static icon while loading */
}
@keyframes fef-loadmore-spin{
    to { transform: rotate(360deg); }
}

.fef-is-gal-loadmore-done{font-size:13px;color:#888;font-style:italic;padding:8px 16px}

/* Like button */
.fef-is-gal-like{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:4px;padding:6px 10px;background:rgba(0,0,0,.5);color:#fff;border:1px solid transparent;border-radius:18px;cursor:pointer;font-size:13px;line-height:1;transition:transform .15s,background .15s,color .15s;backdrop-filter:blur(4px)}
.fef-is-gal-like:hover{transform:scale(1.06);background:rgba(0,0,0,.7)}
.fef-is-gal-like.liked{color:#e91e63;background:rgba(255,255,255,.95)}
.fef-is-gal-like i{transition:transform .25s ease}
.fef-is-gal-like-top-right{top:8px;right:8px}
.fef-is-gal-like-top-left{top:8px;left:8px}
.fef-is-gal-like-bottom-right{bottom:8px;right:8px}
.fef-is-gal-like-bottom-left{bottom:8px;left:8px}
.fef-is-gal-like-count{font-weight:600;display:inline-block;min-width:1ch}

/* Total + per-page polish */
.fef-is-gal-total{font-size:13px;color:#444;border:1px solid transparent;border-radius:0}

/* ── Simple Lightbox (Gallery) ── */
/* ─── Simple lightbox (gallery) ─── */
.fef-is-simple-lb{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}
.fef-is-simple-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.92);z-index:1}
.fef-is-simple-lb-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;z-index:2}
.fef-is-simple-lb-img-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;flex:1 1 auto;padding:1%;box-sizing:border-box;overflow:hidden}
.fef-is-simple-lb-track{position:relative;width:100%;height:100%}
.fef-is-simple-lb-img{
    position:absolute; left:0; top:0; right:0; bottom:0;
    margin:auto;
    max-width:100%; max-height:100%;
    width:auto; height:auto;
    object-fit:contain; border-radius:4px; display:block;
    transition: transform var(--fef-lb-dur, 450ms) cubic-bezier(.4, 0, .2, 1),
                opacity var(--fef-lb-dur, 450ms) cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;
}
.fef-is-simple-lb.fx-none .fef-is-simple-lb-img{ transition: none !important; }
.fef-is-simple-lb-close{position:absolute;top:16px;right:16px;z-index:100020;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.fef-is-simple-lb-close-icon{display:inline-block;line-height:1;will-change:transform;transition:transform .15s ease}
.fef-is-simple-lb-close:hover{background:rgba(255,255,255,.2)}
.fef-is-simple-lb-prev,.fef-is-simple-lb-next{position:absolute;top:50%;z-index:10;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:20px;width:44px;height:44px;border-radius:50%;cursor:pointer;transform:translateY(-50%)}
.fef-is-simple-lb-prev{left:16px}
.fef-is-simple-lb-next{right:16px}
.fef-is-simple-lb-prev:hover,.fef-is-simple-lb-next:hover{background:rgba(255,255,255,.2)}

/* Toolbar (counter + autoplay + share) */
.fef-is-simple-lb-toolbar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:10;display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.4);border-radius:24px;padding:6px 16px;color:#fff}
.fef-is-simple-lb-counter{font-size:13px;color:rgba(255,255,255,.85)}
.fef-is-simple-lb-play{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.fef-is-simple-lb-play:hover{background:rgba(255,255,255,.25)}
.fef-is-simple-lb-play.playing{background:rgba(59,130,246,.5)}
.fef-is-simple-lb-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.fef-is-simple-lb-ring-bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2.5}
.fef-is-simple-lb-ring-progress{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset 0s linear}
.fef-is-simple-lb-share{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:18px;cursor:pointer;font-size:13px}
.fef-is-simple-lb-share:hover{background:rgba(255,255,255,.25)}

/* ────────────────────────────────────────────────────────────────────
 * View Detail button (Custom Post Link feature)
 * Rendered as <a> in the lightbox toolbar; href updates per slide.
 * Defaults match the brand-blue look; admin Style controls override.
 * ─────────────────────────────────────────────────────────────────── */
.fef-is-simple-lb-view-detail{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:18px;
    text-decoration:none;
    cursor:pointer;
    font-size:13px;
    line-height:1;
    transition:background .15s, transform .12s;
}
.fef-is-simple-lb-view-detail:hover{
    background:#1d4ed8;
    transform:translateY(-1px);
}
.fef-is-simple-lb-view-detail i{font-size:11px}

/* Metadata panel */
.fef-is-simple-lb-meta{z-index:5;color:#fff;background:rgba(0,0,0,.75);padding:18px 24px;line-height:1.5;overflow-y:auto;max-height:40vh}
.fef-is-simple-lb-meta-empty{display:none}
.fef-is-simple-lb-meta-title{font-size:18px;font-weight:600;margin-bottom:6px}
.fef-is-simple-lb-meta-desc{font-size:14px;opacity:.9;margin-bottom:10px}
.fef-is-simple-lb-meta-rows{display:flex;flex-direction:column;gap:6px;font-size:13px}
.fef-is-simple-lb-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fef-is-simple-lb-meta-label{opacity:.7;font-weight:500;min-width:64px}
.fef-is-simple-lb-meta-tag{display:inline-block;padding:2px 8px;background:rgba(255,255,255,.12);border-radius:10px;font-size:12px;color:#90caf9}

/* Position variants */
.fef-is-simple-lb.meta-bottom .fef-is-simple-lb-meta{order:2}
.fef-is-simple-lb.meta-bottom{flex-direction:column}
.fef-is-simple-lb.meta-bottom .fef-is-simple-lb-stage{order:1}

.fef-is-simple-lb.meta-right{flex-direction:row}
.fef-is-simple-lb.meta-right .fef-is-simple-lb-stage{flex:1 1 auto;order:1}
.fef-is-simple-lb.meta-right .fef-is-simple-lb-meta{order:2;max-width:340px;max-height:none;height:100%;display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(255,255,255,.08)}

.fef-is-simple-lb.meta-overlay{flex-direction:column}
.fef-is-simple-lb.meta-overlay .fef-is-simple-lb-stage{order:1;flex:1 1 auto}
.fef-is-simple-lb.meta-overlay .fef-is-simple-lb-meta{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);max-width:80vw;border-radius:10px;z-index:5;order:0}

/* Mobile */
@media (max-width: 768px){
    .fef-is-simple-lb.meta-right{flex-direction:column}
    .fef-is-simple-lb.meta-right .fef-is-simple-lb-meta{max-width:100%;height:auto;max-height:35vh;border-left:none;border-top:1px solid rgba(255,255,255,.08)}
    .fef-is-simple-lb-img-wrap{padding:48px 12px}
    .fef-is-simple-lb-prev,.fef-is-simple-lb-next{width:36px;height:36px;font-size:16px}
}

/* Toast */
.fef-is-simple-lb-toast{position:absolute;top:16px;left:50%;transform:translate(-50%,-20px);z-index:11;background:rgba(0,0,0,.85);color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.fef-is-simple-lb-toast.show{opacity:1;transform:translate(-50%,0)}
/* ──────────────────────────────────────────────────────────────
 * Categories — parent expand/collapse (NEW)
 * ────────────────────────────────────────────────────────────── */
.fef-is-gal-cat-cb-group{ position:relative; }

/* Parent row: flex layout with the parent label + count + toggle.
   The label wrapper takes flex:1 so the count + toggle naturally sit at the right edge. */
.fef-is-gal-cat-cb-row{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
}
.fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
}
/* Make the label inside the parent grow so the count is pushed to the right */
.fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb .fef-is-gal-cat-label{
    flex:1 1 auto;
    min-width:0;
    word-break:break-word;
}
/* Count — on the right by default, but admin can flip via gn_align */
.fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb .fef-is-gal-cat-count{
    flex:0 0 auto;
    margin-left:auto;
    text-align:right;
}

.fef-is-gal-cat-cb-toggle{
    display:none;            /* hidden by default; .has-toggle/.has-toggle-mobile flips it on */
    width:24px; height:24px;
    border:1px solid #d0d7de; background:#fff; color:#444;
    border-radius:4px; cursor:pointer; padding:0;
    align-items:center; justify-content:center;
    font-size:11px; flex:0 0 auto;
    transition: background .15s, border-color .15s, color .15s;
    line-height:1;
}
.fef-is-gal-cat-cb-toggle:hover{ background:#f0f6fc; border-color:#2271b1; color:#2271b1; }
.fef-is-gal-cat-cb-group.has-toggle .fef-is-gal-cat-cb-toggle{ display:inline-flex; }
/* Icon visibility — exactly ONE icon is visible based on group state */
.fef-is-gal-cat-cb-group .fef-cat-toggle-icon-plus,
.fef-is-gal-cat-cb-group.is-closed .fef-cat-toggle-icon-plus{ display:inline-block !important; }
.fef-is-gal-cat-cb-group .fef-cat-toggle-icon-minus,
.fef-is-gal-cat-cb-group.is-closed .fef-cat-toggle-icon-minus{ display:none !important; }
.fef-is-gal-cat-cb-group.is-open .fef-cat-toggle-icon-plus{ display:none !important; }
.fef-is-gal-cat-cb-group.is-open .fef-cat-toggle-icon-minus{ display:inline-block !important; }

/* Toggle button position — left of label vs right (after count) */
.fef-cat-toggle-pos-left .fef-is-gal-cat-cb-row .fef-is-gal-cat-cb-toggle{
    order:-1;             /* before the label */
}
.fef-cat-toggle-pos-right .fef-is-gal-cat-cb-row .fef-is-gal-cat-cb-toggle{
    order:99;             /* after everything */
    margin-left:6px;
}
/* When toggle is on left, the count should still be right-aligned within the label box */
.fef-cat-toggle-pos-left .fef-is-gal-cat-cb-row > .fef-is-gal-cat-cb .fef-is-gal-cat-count{
    margin-left:auto;
}

/* Children visibility tied to parent open/closed state */
.fef-is-gal-cat-cb-group .fef-is-gal-cat-cb-children{
    overflow:hidden;
    max-height:9999px;
    transition: max-height .25s ease, opacity .15s ease;
    opacity:1;
}
.fef-is-gal-cat-cb-group.is-closed .fef-is-gal-cat-cb-children{
    max-height:0;
    opacity:0;
    pointer-events:none;
}

/* View More button for limited categories */
.fef-is-gal-cat-view-more{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:8px; padding:6px 12px;
    border:1px solid #d0d7de; background:#fff; color:#2271b1;
    border-radius:4px; cursor:pointer; font-size:13px; font-weight:500;
    transition: background .15s, border-color .15s;
}
.fef-is-gal-cat-view-more:hover{ background:#f0f6fc; border-color:#2271b1; }
.fef-is-gal-cat-view-more i{ font-size:11px; }

/* ──────────────────────────────────────────────────────────────
 * Master heading toggle (collapses ALL parents at once)
 * ────────────────────────────────────────────────────────────── */
.fef-is-gal-cat-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.fef-is-gal-cat-master-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0;
    border:1px solid #d0d7de; background:#fff; color:#444;
    border-radius:4px; cursor:pointer; font-size:11px;
    transition: background .15s, border-color .15s, color .15s;
}
.fef-is-gal-cat-master-toggle:hover{ background:#f0f6fc; border-color:#2271b1; color:#2271b1; }
.fef-is-gal-cat-master-toggle .fef-master-icon-plus{ display:inline-block; }
.fef-is-gal-cat-master-toggle .fef-master-icon-minus{ display:none; }
/* When master is open → show minus, hide plus */
.fef-is-gal-cat-checkboxes.master-open .fef-is-gal-cat-master-toggle .fef-master-icon-plus{ display:none; }
.fef-is-gal-cat-checkboxes.master-open .fef-is-gal-cat-master-toggle .fef-master-icon-minus{ display:inline-block; }
/* When master is closed → hide the body */
.fef-is-gal-cat-checkboxes.master-closed .fef-is-gal-cat-body{
    display:none;
}

/* ──────────────────────────────────────────────────────────────
 * Mobile filter button label + drawer behavior (NEW)
 * ────────────────────────────────────────────────────────────── */
.fef-is-gal-eye-toggle .fef-eye-label{
    display:none;            /* desktop: icon-only */
    margin-left:6px; font-size:13px; font-weight:500;
}
@media (max-width: 768px){
    .fef-is-gal-eye-toggle{ width:auto; padding:0 12px; min-width:40px; }
    .fef-is-gal-eye-toggle .fef-eye-label{ display:inline; }

    /* CRITICAL: kill the grid layout on mobile so no white gap remains where the sidebar was */
    .fef-is-gallery-wrap.fef-is-gal-has-sidebar,
    .fef-is-gallery-wrap{
        display:block !important;
        grid-template-columns: none !important;
        gap:0 !important;
    }

    /* Main content takes full width on mobile */
    .fef-is-gal-main{ width:100%; min-width:0; }

    /* Sidebar becomes a drawer overlay — fully out of layout flow */
    .fef-is-gal-sidebar{
        position:fixed !important;
        top:0; left:0; bottom:0;
        width:85vw; max-width:340px;
        background:#fff;
        z-index:1001;
        transform: translateX(-100%);
        transition: transform .3s ease;
        overflow-y:auto;
        box-shadow: 2px 0 18px rgba(0,0,0,.18);
        padding:18px 14px;
        box-sizing:border-box;
        max-height:100vh;
        margin:0 !important;
        /* Remove the desktop sticky/border */
        border:none !important;
        border-radius:0 !important;
    }

    /* Drawer is open ONLY when this class is present — never show by default on mobile */
    .fef-is-gal-sidebar{ visibility:hidden; }
    .fef-is-gallery-wrap.fef-mobile-drawer-open .fef-is-gal-sidebar{
        transform: translateX(0);
        visibility:visible;
    }

    /* Backdrop */
    .fef-is-gal-mobile-backdrop{
        position:fixed; inset:0;
        background:rgba(0,0,0,.45);
        z-index:1000;
        animation: fef-fadein .25s ease;
    }
    @keyframes fef-fadein { from { opacity:0; } to { opacity:1; } }

    /* Toolbar — stacked vs inline */
    .fef-is-gal-toolbar.fef-tb-mobile-stack{
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }
    .fef-is-gal-toolbar.fef-tb-mobile-stack > *{
        width:100%;
        margin:0 !important;
    }
    .fef-is-gal-toolbar.fef-tb-mobile-inline{
        flex-wrap:wrap;
        gap:8px;
    }
    /* Mobile alignment classes */
    .fef-mob-align-left{ margin-right:auto !important; }
    .fef-mob-align-right{ margin-left:auto !important; }
    /* When stacked, alignment maps to text-align inside the row */
    .fef-tb-mobile-stack .fef-mob-align-left{ text-align:left; align-self:flex-start; }
    .fef-tb-mobile-stack .fef-mob-align-right{ text-align:right; align-self:flex-end; }

    /* Hide elements explicitly disabled on mobile */
    .fef-mob-hidden{ display:none !important; }

    /* Drawer-mode sidebar header should still show normally */
    .fef-is-gal-sidebar .fef-is-gal-cat-header{
        position:sticky; top:0;
        background:#fff; z-index:5;
        margin:-18px -14px 12px -14px;
        padding:14px 14px 10px 14px;
        border-bottom:1px solid #e5e5e5;
    }

    /* ════════════════════════════════════════════════════════════════════
     * MOBILE TOOLBAR REFINEMENT
     * ════════════════════════════════════════════════════════════════════
     * Goal: compact, padded, professional mobile layout. Specifically:
     *   • Row 1: Total count (left) + Filters toggle (right)
     *   • Row 2: Auto-Play button (centered pill, sized to content)
     *   • Row 3: Show dropdown (50%) + Columns dropdown (50%) sharing one row
     *   • Row 4: Sort dropdown (full width if present)
     *   • Row 5: Search bar (full width)
     *
     * Implementation:
     *   The toolbar becomes a flex-wrap container. Each child sets its own
     *   flex-basis: 100% for full-width rows, 50%-gap for side-by-side pairs.
     *   `order` properties drive the visual sequence, so the visible row order
     *   stays consistent regardless of what PHP echoed first.
     *
     * Specificity: `.fef-is-gallery-wrap` qualifier wins against the earlier
     * generic `.fef-tb-mobile-stack > * { width:100% }` rule. */

    .fef-is-gallery-wrap{
        padding: 12px !important;
        box-sizing: border-box;
    }

    /* Toolbar container — wraps children into rows */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack{
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center;
        padding: 10px 12px 12px;
        background: #fafafa;
        border-radius: 10px;
        border: 1px solid #ececec;
        gap: 10px;
        margin-bottom: 14px;
    }

    /* Override the generic stack rule that forces width:100% on every child */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack > *{
        width: auto !important;
        margin: 0 !important;
    }

    /* ── Row 1: Total count (flex-grow) + Filters toggle (auto) ────────── */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-total{
        order: 1;
        flex: 1 1 auto;
        font-size: 12px;
        color: #666;
        font-weight: 500;
        min-width: 0;
    }
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-eye-toggle{
        order: 2;
        flex: 0 0 auto;
        margin-left: auto !important;
        padding: 6px 14px !important;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #ddd;
        font-size: 13px;
        gap: 8px;
        min-height: 36px;
    }
    .fef-is-gallery-wrap .fef-is-gal-eye-toggle .fef-eye-label{
        font-size: 13px;
        font-weight: 500;
    }

    /* ── Row 2: Auto-Play pill, centered ───────────────────────────────── */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-autoscroll-btn{
        order: 3;
        flex: 1 1 100%;
        align-self: center;
        justify-content: center;
        padding: 8px 18px !important;
        border-radius: 999px !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        color: inherit !important;
        font-size: 13px !important;
        font-weight: 500;
        gap: 8px !important;
        min-height: 38px;
    }

    /* ── Row 3: Show + Columns — sharing one row 50/50 ─────────────────── *
     * `calc(50% - 5px)` accounts for the 10px gap between them.
     * `min-width: 0` is critical: without it, the contained <select> would
     * refuse to shrink below its intrinsic content width, breaking 50/50. */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-perpage{
        order: 4;
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        display: flex !important;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-gridsel{
        order: 5;
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        display: flex !important;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }

    /* ── Row 4: Sort dropdown — full width if present ──────────────────── */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-sort{
        order: 6;
        flex: 1 1 100%;
        min-width: 0;
        display: flex !important;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }

    /* Common select styling for all three dropdowns */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-perpage select,
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-gridsel select,
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-sort select{
        flex: 1 1 auto;
        min-width: 0;
        height: 36px;
        font-size: 13px;
        padding: 0 28px 0 10px;
        border-radius: 8px;
        border: 1px solid #d8d8d8;
        background: #fff;
    }

    /* ── Row 5: Search — full width, last in visual order ──────────────── */
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-search{
        order: 7;
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
    }
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack .fef-is-gal-search input{
        width: 100%;
        box-sizing: border-box;
        height: 40px;
        font-size: 14px;
        padding: 0 14px 0 38px;
        border-radius: 999px;
    }

    /* Grid spacing — tighter on mobile so cards aren't separated by big gulfs */
    .fef-is-gallery-wrap .fef-is-gal-grid{
        gap: 10px !important;
    }
}

/* ──────────────────────────────────────────────────────────────
 * Lazy-load loader + per-image shimmer placeholder
 * ────────────────────────────────────────────────────────────── */
.fef-is-gal-grid{ position:relative; }
.fef-is-gal-loader-overlay{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.7);
    z-index:50;
    opacity:0;
    visibility:hidden;
    transition: opacity .25s ease;
    pointer-events:none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius:inherit;
}
.fef-is-gal-loader-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.fef-is-gal-loader{
    display:flex; align-items:center; justify-content:center;
    width:64px; height:64px;
    --fef-loader-color: #2271b1;
}
.fef-is-gal-loader-spinner{
    width:42px; height:42px;
    border:4px solid rgba(0,0,0,0.08);
    border-top-color: var(--fef-loader-color, #2271b1);
    border-radius:50%;
    animation: fef-spin 0.8s linear infinite;
}
@keyframes fef-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Per-image shimmer — sits behind the <img> until it loads */
.fef-is-gal-item{ position:relative; }
.fef-is-gal-img-shimmer{
    position:absolute; inset:0;
    background: linear-gradient(
        90deg,
        #f1f3f5 0%,
        #e9ecef 50%,
        #f1f3f5 100%
    );
    background-size: 200% 100%;
    animation: fef-shimmer 1.4s ease-in-out infinite;
    z-index:1;
    border-radius:inherit;
    pointer-events:none;
}
@keyframes fef-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Once image is loaded, fade in over the shimmer (which is removed by JS) */
.fef-is-gal-item .fef-is-gal-img{
    transition: opacity .3s ease;
    position:relative; z-index:2;
}
.fef-is-gal-item:not(.fef-img-loaded):not(.fef-img-error) .fef-is-gal-img{
    opacity:0;
}
.fef-is-gal-item.fef-img-loaded .fef-is-gal-img{
    opacity:1;
}

/* ──────────────────────────────────────────────────────────────
 * Corner group — wraps views chip + like button when they share a corner
 * so they right-align as a unit. Anchored to the chosen corner; children
 * are no longer individually absolute-positioned inside this wrapper.
 *
 * When only one of the two is enabled, PHP doesn't create the wrapper —
 * the remaining chip uses its legacy individual position class and sits
 * flush against the corner naturally.
 * ────────────────────────────────────────────────────────────── */
.fef-is-gal-corner-group{
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none; /* children opt back in */
}
.fef-is-gal-corner-group > *{
    pointer-events: auto;
    position: static !important;     /* override the individual position classes inside */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}
/* Per-corner anchoring */
.fef-is-gal-corner-group.fef-corner-top-right    { top:8px;    right:8px;  }
.fef-is-gal-corner-group.fef-corner-top-left     { top:8px;    left:8px;   }
.fef-is-gal-corner-group.fef-corner-bottom-right { bottom:8px; right:8px;  }
.fef-is-gal-corner-group.fef-corner-bottom-left  { bottom:8px; left:8px;   }

/* ──────────────────────────────────────────────────────────────
 * View counter chip on grid items
 * ────────────────────────────────────────────────────────────── */
.fef-is-gal-views{
    position:absolute;
    z-index:5;
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 10px;
    background: rgba(0,0,0,0.55);
    color:#fff;
    font-size:12px;
    font-weight:500;
    border-radius:14px;
    line-height:1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events:none;
}
.fef-is-gal-views i{ font-size:11px; opacity:0.95; }
.fef-is-gal-views-count{ min-width:8px; }
.fef-is-gal-views-top-left    { top:8px; left:8px; }
.fef-is-gal-views-top-right   { top:8px; right:8px; }

/* When BOTH like and views are top-right, push the like button left to clear the views chip.
   Approximate width of views chip = ~50px. User can adjust via gal_views_gap_to_like slider
   which renders --views-tr-offset on the like button. */
.fef-is-gal-item.fef-has-views-top-right.fef-has-like-top-right .fef-is-gal-like-top-right {
    right: calc(8px + var(--views-tr-offset, 65px));
}
.fef-is-gal-views-bottom-left { bottom:8px; left:8px; }
.fef-is-gal-views-bottom-right{ bottom:8px; right:8px; }

/* ════════════════════════════════════════════════════════════════════
 * COMPACT LIGHTBOX METADATA (top-left / top-right one-liner)
 * ════════════════════════════════════════════════════════════════════ */
/* When in a compact mode, move the meta to the top corner as a single line */
.fef-is-simple-lb.meta-compact_top_left .fef-is-simple-lb-meta,
.fef-is-simple-lb.meta-compact_top_right .fef-is-simple-lb-meta {
    position: fixed;
    top: 16px;
    max-width: calc(100vw - 100px); /* leave room for close button on right */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.4;
    z-index: 100012;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    transition: opacity .25s ease, transform .25s ease;
    opacity: 1;
    pointer-events: auto;
}
.fef-is-simple-lb.meta-compact_top_left .fef-is-simple-lb-meta {
    left: 16px;
    right: auto;
}
.fef-is-simple-lb.meta-compact_top_right .fef-is-simple-lb-meta {
    right: 70px; /* keep clear of close button */
    left: auto;
}
/* Compact meta line — single row, small text, separator between fields */
.fef-cmpt-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    gap: 0;
}
.fef-cmpt-part {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.fef-cmpt-part.fef-cmpt-title {
    font-weight: 600;
    flex-shrink: 0;
}
.fef-cmpt-part.fef-cmpt-desc {
    opacity: 0.85;
    max-width: 280px;
}
.fef-cmpt-part.fef-cmpt-tax,
.fef-cmpt-part.fef-cmpt-cpt,
.fef-cmpt-part.fef-cmpt-tags,
.fef-cmpt-part.fef-cmpt-author,
.fef-cmpt-part.fef-cmpt-date,
.fef-cmpt-part.fef-cmpt-views {
    opacity: 0.78;
    font-size: 11.5px;
    flex-shrink: 0;
}
.fef-cmpt-part.fef-cmpt-views i {
    margin-right: 3px;
    opacity: 0.85;
}
.fef-cmpt-sep {
    margin: 0 8px;
    opacity: 0.45;
    flex-shrink: 0;
}

/* Eye toggle button — sits below the close button on the same side as meta */
.fef-is-simple-lb-meta-eye {
    position: fixed;
    top: 70px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    z-index: 100013;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .2s ease, transform .15s ease;
}
.fef-is-simple-lb-meta-eye:hover {
    background: rgba(0,0,0,0.75);
    transform: scale(1.05);
}
.fef-is-simple-lb.meta-compact_top_left .fef-is-simple-lb-meta-eye {
    left: 16px;
}
.fef-is-simple-lb.meta-compact_top_right .fef-is-simple-lb-meta-eye {
    right: 70px;
}
/* When compact meta is hidden, fade out + slide up the meta panel */
.fef-is-simple-lb.fef-cmpt-hidden .fef-is-simple-lb-meta {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}
/* When compact meta hidden + admin chose to also hide buttons, fade out the toolbar too */
.fef-is-simple-lb.fef-cmpt-hidden.meta-compact_top_left,
.fef-is-simple-lb.fef-cmpt-hidden.meta-compact_top_right {
    /* base: nothing */
}
/* Apply only when admin enabled "hide buttons too" — JS adds .fef-cmpt-hide-bottoms class on demand;
   simpler approach: always hide when compact meta is hidden (matches user's described UX). */
.fef-is-simple-lb.fef-cmpt-hidden .fef-is-simple-lb-toolbar {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

/* Bottom buttons (Play / Share) placement — left / center / right */
.fef-is-simple-lb.btns-left .fef-is-simple-lb-toolbar {
    justify-content: flex-start;
    padding-left: 24px;
}
.fef-is-simple-lb.btns-center .fef-is-simple-lb-toolbar {
    justify-content: center;
}
.fef-is-simple-lb.btns-right .fef-is-simple-lb-toolbar {
    justify-content: flex-end;
    padding-right: 24px;
}

/* Mobile compact mode tweaks */
@media (max-width: 600px) {
    .fef-is-simple-lb.meta-compact_top_left .fef-is-simple-lb-meta,
    .fef-is-simple-lb.meta-compact_top_right .fef-is-simple-lb-meta {
        max-width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
        font-size: 11px;
    }
    .fef-cmpt-part.fef-cmpt-desc {
        max-width: 140px;
    }

    /* ════════════════════════════════════════════════════════════════════
     * LIGHTBOX TOOLBAR — mobile single-line layout
     * ════════════════════════════════════════════════════════════════════
     * On narrow viewports the toolbar was breaking onto multiple lines (counter
     * "380 / 400" wrapping into three vertical pieces — see uploaded screenshot).
     * Root cause: the toolbar uses `inline-flex` and natural shrink-to-fit, but
     * when its natural width approaches viewport width, the counter text wraps
     * at every space character.
     *
     * Fix:
     *   • Force the counter to never wrap (the "N / N" text stays as one token).
     *   • Tighten gap/padding so all three items fit within the available width.
     *   • Cap the toolbar's max-width to leave a margin on each side, then let
     *     it shrink children if they truly don't fit. */
    .fef-is-simple-lb-toolbar{
        max-width: calc(100vw - 24px);
        padding: 5px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .fef-is-simple-lb-counter{
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
    }
    /* Slightly smaller play button so the row stays compact on narrow phones */
    .fef-is-simple-lb-play{
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }
    /* Share button — tighten padding and prevent the icon/label from wrapping */
    .fef-is-simple-lb-share{
        padding: 5px 10px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        gap: 5px;
    }
    /* View Detail button — same treatment so all toolbar items fit on one row */
    .fef-is-simple-lb-view-detail{
        padding: 5px 10px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        gap: 5px;
    }
}

/* ════════════════════════════════════════════════════════════════════
 * AUTO-SCROLL MODE
 * ════════════════════════════════════════════════════════════════════ */
.fef-is-gal-autoscroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
    box-shadow: 0 1px 3px rgba(99,102,241,0.3);
    white-space: nowrap;
}
.fef-is-gal-autoscroll-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99,102,241,0.4);
}
.fef-is-gal-autoscroll-btn.fef-as-on {
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    box-shadow: 0 1px 3px rgba(239,68,68,0.4);
    animation: fef-as-pulse 2s ease-in-out infinite;
}
@keyframes fef-as-pulse {
    0%, 100% { box-shadow: 0 1px 3px rgba(239,68,68,0.4); }
    50%      { box-shadow: 0 1px 12px rgba(239,68,68,0.7); }
}
.fef-is-gal-autoscroll-btn i {
    font-size: 11px;
}

/* When auto-scroll active: hide sidebar, expand grid, hide pagination/load-more */
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-sidebar,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-eye-toggle,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-pager-wrap,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-loadmore-wrap,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-pills-wrap,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-perpage,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-search,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-total,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-sort,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-gridsel {
    display: none !important;
}
/* Force the grid to fill the wrap when sidebar is hidden */
.fef-is-gallery-wrap.fef-as-active.fef-is-gal-has-sidebar {
    grid-template-columns: 1fr !important;
}
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-grid {
    transition: grid-template-columns .35s ease;
}
/* Centered, sticky control panel during auto-scroll */
.fef-is-gallery-wrap.fef-as-active::before {
    content: "Auto-Scroll Active — click Pause to stop";
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(99,102,241,0.95);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ════════════════════════════════════════════════════════════════════
 * HOVER ZOOM
 * ════════════════════════════════════════════════════════════════════ */
.fef-is-gal-grid[data-hover-zoom="1"] .fef-is-gal-item {
    transition:
        transform var(--fef-hz-duration, 350ms) var(--fef-hz-easing, cubic-bezier(0.4,0,0.2,1)),
        box-shadow var(--fef-hz-duration, 350ms) var(--fef-hz-easing, cubic-bezier(0.4,0,0.2,1)),
        z-index 0s linear;
    transform-origin: center center;
    will-change: transform;
}
.fef-is-gal-grid[data-hover-zoom="1"] .fef-is-gal-item:hover {
    transform: scale(var(--fef-hz-scale, 1.6));
    z-index: 30;
    position: relative;
}
/* When per-column scale resolves to 1.0 (or below), suppress hover entirely */
.fef-is-gal-grid[data-hover-zoom="1"].fef-hz-disabled .fef-is-gal-item:hover {
    transform: none !important;
    z-index: auto !important;
    box-shadow: none !important;
}
.fef-is-gal-grid[data-hover-zoom="1"][data-hz-shadow="1"] .fef-is-gal-item:hover {
    box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.18);
}
/* Inside the zoomed item, override any image masking that would clip the enlarged view */
.fef-is-gal-grid[data-hover-zoom="1"] .fef-is-gal-item:hover .fef-is-gal-img {
    transform: none;
}
/* Edge-aware origin: items in the leftmost / rightmost columns shift origin so they don't get clipped */
.fef-is-gal-grid[data-hover-zoom="1"] .fef-is-gal-item:hover {
    /* JS-free fallback uses center origin — works fine on most layouts because
       the .fef-is-gal-grid has overflow:visible and z-index:30 lifts above others.
       For grid positions near edges, the natural center origin still keeps the
       image visible because of transform-origin defaulting to center. */
}
/* When zoom is enabled, suppress hover-zoom during auto-scroll (busy state) */
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-grid[data-hover-zoom="1"] .fef-is-gal-item:hover {
    transform: none;
    box-shadow: none;
}
/* Disable on touch devices (no hover concept) */
@media (hover: none) {
    .fef-is-gal-grid[data-hover-zoom="1"] .fef-is-gal-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
 * AUTO-PLAY BUTTON — PLACEMENT VARIANTS
 * ════════════════════════════════════════════════════════════════════ */
/* When in toolbar, the original positional class .fef-as-pos-toolbar acts
 * as a no-op (the parent toolbar handles layout) */
.fef-is-gal-autoscroll-btn.fef-as-pos-toolbar {
    /* default flex item in toolbar */
}
/* Sticky top-left / top-right / bottom-* — fixed to viewport */
.fef-is-gal-autoscroll-btn.fef-as-pos-top_left_grid,
.fef-is-gal-autoscroll-btn.fef-as-pos-top_right_grid,
.fef-is-gal-autoscroll-btn.fef-as-pos-bottom_left_grid,
.fef-is-gal-autoscroll-btn.fef-as-pos-bottom_right_grid,
.fef-is-gal-autoscroll-btn.fef-as-pos-top_center_grid {
    position: fixed;
    z-index: 200;
}
/* End-of-grid wrapper centers the button */
.fef-is-gal-autoscroll-end-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0 4px;
}
/* When auto-scroll is active, lift the sticky button above the gallery overlay */
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-autoscroll-btn.fef-as-pos-top_left_grid,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-autoscroll-btn.fef-as-pos-top_right_grid,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-autoscroll-btn.fef-as-pos-bottom_left_grid,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-autoscroll-btn.fef-as-pos-bottom_right_grid,
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-autoscroll-btn.fef-as-pos-top_center_grid {
    z-index: 9999;
}
/* During auto-scroll active, the toolbar is hidden — but if button was in toolbar,
   we need to keep it visible. So show the toolbar version directly. */
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-toolbar {
    /* allow toolbar to be present so button stays clickable when in-toolbar mode */
    display: flex !important;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    position: fixed;
    top: 50px; /* below the "Auto-Scroll Active" banner */
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: auto;
    pointer-events: auto;
}
/* Inside that visible toolbar, only the autoscroll button stays visible */
.fef-is-gallery-wrap.fef-as-active .fef-is-gal-toolbar > *:not(.fef-is-gal-autoscroll-btn) {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * WATERMARK
 * ════════════════════════════════════════════════════════════════════ */
/* Container — sits absolutely over the image, click-through */
.fef-wm {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: var(--wm-opacity, 0.55);
    z-index: 4; /* above shimmer (1), image (2), but below info-overlay/views (5) */
    display: block;
}
/* Make sure grid items are positioned containers */
.fef-is-gal-item { position: relative; }

/* No-repeat single watermark — position via flexbox */
.fef-wm.fef-wm-repeat-no-repeat {
    display: flex;
}
/* 9-point grid positioning (single watermark) */
.fef-wm.fef-wm-pos-top-left      { align-items: flex-start; justify-content: flex-start; padding: var(--wm-offset-y, 3%) var(--wm-offset-x, 3%); }
.fef-wm.fef-wm-pos-top-center    { align-items: flex-start; justify-content: center;     padding-top: var(--wm-offset-y, 3%); }
.fef-wm.fef-wm-pos-top-right     { align-items: flex-start; justify-content: flex-end;   padding: var(--wm-offset-y, 3%) var(--wm-offset-x, 3%); }
.fef-wm.fef-wm-pos-middle-left   { align-items: center;     justify-content: flex-start; padding-left: var(--wm-offset-x, 3%); }
.fef-wm.fef-wm-pos-center        { align-items: center;     justify-content: center; }
.fef-wm.fef-wm-pos-middle-right  { align-items: center;     justify-content: flex-end;   padding-right: var(--wm-offset-x, 3%); }
.fef-wm.fef-wm-pos-bottom-left   { align-items: flex-end;   justify-content: flex-start; padding: var(--wm-offset-y, 3%) var(--wm-offset-x, 3%); }
.fef-wm.fef-wm-pos-bottom-center { align-items: flex-end;   justify-content: center;     padding-bottom: var(--wm-offset-y, 3%); }
.fef-wm.fef-wm-pos-bottom-right  { align-items: flex-end;   justify-content: flex-end;   padding: var(--wm-offset-y, 3%) var(--wm-offset-x, 3%); }

/* Single text/icon — keep them on a single line */
.fef-wm.fef-wm-repeat-no-repeat .fef-wm-text,
.fef-wm.fef-wm-repeat-no-repeat .fef-wm-icon {
    white-space: nowrap;
    line-height: 1.2;
}

/* Single image — sized in % of image width */
.fef-wm.fef-wm-repeat-no-repeat .fef-wm-img {
    width: var(--wm-size, 20%);
    height: auto;
    display: block;
}

/* Repeat (tile both axes) — flex-wrap with rotation */
.fef-wm.fef-wm-repeat-repeat {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    transform: rotate(var(--wm-rotation, -30deg));
    /* Expand container to cover after rotation */
    width: 200%;
    height: 200%;
    left: -50%;
    top: -50%;
    inset: auto;
    position: absolute;
    gap: var(--wm-gap, 120px);
}
.fef-wm.fef-wm-repeat-repeat .fef-wm-text,
.fef-wm.fef-wm-repeat-repeat .fef-wm-icon {
    white-space: nowrap;
    line-height: 1;
}
.fef-wm.fef-wm-repeat-repeat.fef-wm-image {
    /* Use background-image tiling for image type repeat */
    background-image: var(--wm-bg-url);
    background-repeat: repeat;
    background-size: var(--wm-size, 20%) auto;
}

/* Repeat-x — single row tiled horizontally */
.fef-wm.fef-wm-repeat-repeat-x {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wm-gap, 120px);
    overflow: hidden;
    padding: 0 var(--wm-gap, 120px);
}
.fef-wm.fef-wm-repeat-repeat-x .fef-wm-text,
.fef-wm.fef-wm-repeat-repeat-x .fef-wm-icon {
    white-space: nowrap;
    flex-shrink: 0;
}
.fef-wm.fef-wm-repeat-repeat-x.fef-wm-image {
    background-image: var(--wm-bg-url);
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto var(--wm-size, 20%);
}

/* Repeat-y — single column tiled vertically */
.fef-wm.fef-wm-repeat-repeat-y {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wm-gap, 120px);
    overflow: hidden;
    padding: var(--wm-gap, 120px) 0;
}
.fef-wm.fef-wm-repeat-repeat-y .fef-wm-text,
.fef-wm.fef-wm-repeat-repeat-y .fef-wm-icon {
    white-space: nowrap;
    flex-shrink: 0;
}
.fef-wm.fef-wm-repeat-repeat-y.fef-wm-image {
    background-image: var(--wm-bg-url);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: var(--wm-size, 20%) auto;
}

/* Lightbox watermark — overlays full-screen image */
.fef-is-simple-lb-img-wrap { position: relative; }
.fef-is-simple-lb-wm-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}
.fef-is-simple-lb-wm-wrap.fef-wm-repeat-no-repeat { display: flex; }
.fef-is-simple-lb-wm-wrap.fef-wm-repeat-repeat {
    display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
    transform: rotate(var(--wm-rotation, -30deg));
    width: 200%; height: 200%; left: -50%; top: -50%; inset: auto;
    gap: var(--wm-gap, 120px);
}
.fef-is-simple-lb-wm-wrap.fef-wm-repeat-repeat-x {
    display: flex; align-items: center; gap: var(--wm-gap, 120px); overflow: hidden;
    padding: 0 var(--wm-gap, 120px);
}
.fef-is-simple-lb-wm-wrap.fef-wm-repeat-repeat-y {
    display: flex; flex-direction: column; align-items: center; gap: var(--wm-gap, 120px);
    overflow: hidden; padding: var(--wm-gap, 120px) 0;
}

/* Lightbox download button (matches share button styling) */
.fef-is-simple-lb-download {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 24px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .18s ease, transform .18s ease;
}
.fef-is-simple-lb-download:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.fef-is-simple-lb-download i { font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════
 * NO-IMAGE FALLBACK ITEMS
 * Subtle visual marker for posts using the admin's fallback image.
 * ════════════════════════════════════════════════════════════════════ */
.fef-is-gal-item-fallback {
    /* Keeps full functionality but visually hints these are placeholders */
    background: #f5f5f5;
}
.fef-is-gal-item-fallback .fef-is-gal-img {
    /* slight desaturation to mark it as a placeholder */
    filter: saturate(0.85);
    opacity: 0.9;
}
/* ════════════════════════════════════════════════════════════════════
 * MOBILE GRID VISIBILITY CONTROLS
 *
 * Each `.fef-mob-hide-*` class is added to the gallery wrap by PHP based on
 * the matching admin toggle (Mobile Grid Visibility section). On screens
 * ≤768px, the corresponding meta element is hidden via display:none.
 *
 * This lets admins curate which info elements appear on small thumbnails
 * (where overlays would otherwise cover most of the image) without
 * affecting desktop appearance.
 *
 * The rules use !important so they win even if a higher-specificity rule
 * elsewhere tries to force the element visible (e.g. hover overlays that
 * set opacity:1 on hover). The wrap-prefix scopes them to this widget.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fef-is-gallery-wrap.fef-mob-hide-title .fef-is-info-title,
    .fef-is-gallery-wrap.fef-mob-hide-title .fef-is-gal-title {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-caption .fef-is-info-caption,
    .fef-is-gallery-wrap.fef-mob-hide-caption .fef-is-gal-caption {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-desc .fef-is-info-desc,
    .fef-is-gallery-wrap.fef-mob-hide-desc .fef-is-gal-desc {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-tag .fef-is-info-tag,
    .fef-is-gallery-wrap.fef-mob-hide-tag .fef-is-gal-tag,
    .fef-is-gallery-wrap.fef-mob-hide-tag .fef-is-info-tags {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-author .fef-is-info-meta[data-meta-key="author"],
    .fef-is-gallery-wrap.fef-mob-hide-author .fef-is-gal-author {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-date .fef-is-info-meta[data-meta-key="date"],
    .fef-is-gallery-wrap.fef-mob-hide-date .fef-is-gal-date {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-cpt .fef-is-info-meta[data-meta-key="cpt"],
    .fef-is-gallery-wrap.fef-mob-hide-cpt .fef-is-gal-cpt {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-tax .fef-is-info-meta[data-meta-key="tax"],
    .fef-is-gallery-wrap.fef-mob-hide-tax .fef-is-gal-tax {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-link .fef-is-info-link,
    .fef-is-gallery-wrap.fef-mob-hide-link .fef-is-gal-link {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-like .fef-is-gal-like {
        display: none !important;
    }
    .fef-is-gallery-wrap.fef-mob-hide-views .fef-is-gal-views {
        display: none !important;
    }
    /* Master toggle — hides the entire info overlay block. Use this for a
       clean image-only mobile grid where you don't want ANY meta visible. */
    .fef-is-gallery-wrap.fef-mob-hide-entire-info .fef-is-info {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
 * FILTER LOADER — dark-gray centered overlay shown during filter ops
 *
 * Used by: category filter, sort change, column change, pagination, search.
 * NOT used by Load More (which has its own in-place status text above button).
 *
 * Positioned via inline `top`/`left` from JS (centered on the visible portion
 * of the gallery wrap intersected with the viewport — always on screen).
 * Uses `position: fixed` so scroll doesn't drag it offscreen during slow loads.
 * `transform: translate(-50%, -50%)` centers the box on its own anchor point.
 *
 * Hidden by default; JS adds `.is-visible` to fade it in.
 * ════════════════════════════════════════════════════════════════════ */
.fef-filter-loader{
    position: fixed;
    /* top, left set inline by JS */
    transform: translate(-50%, -50%);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.fef-filter-loader.is-visible{
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s linear 0s;
}
.fef-filter-loader-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.7);       /* semi-transparent white — gallery shows through softly */
    border: none;
    border-radius: 10px;                         /* keep gentle rounding so edges don't look harsh */
    box-shadow: none;                            /* no drop shadow */
    min-width: 180px;
    max-width: 320px;
}
.fef-filter-loader-spinner{
    width: 32px;
    height: 32px;
    border: 3px solid rgba(60, 60, 60, 0.15);  /* light gray ring */
    border-top-color: #444;                     /* dark gray "moving" arc */
    border-radius: 50%;
    animation: fef-filter-loader-spin 0.7s linear infinite;
}
@keyframes fef-filter-loader-spin{
    to { transform: rotate(360deg); }
}
.fef-filter-loader-msg{
    color: #444;                                /* dark gray text */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.2px;
}

/* ════════════════════════════════════════════════════════════════════
 * MOBILE TOOLBAR COLLAPSE
 *
 * On mobile (≤768px), the full toolbar (total + filters icon + auto-play +
 * show + columns + search + sort) wastes vertical space — visitors scroll
 * 4–5 rows before reaching the gallery. This collapse mechanism hides the
 * toolbar by default on mobile and reveals it when the visitor taps the
 * dedicated "Filters & Search" toggle button.
 *
 * Desktop is completely unaffected: the toggle button is hidden, toolbar
 * stays visible at all times.
 * ════════════════════════════════════════════════════════════════════ */

/* Toggle button — hidden on desktop, visible on mobile only.
 * High specificity (`button.fef-is-gal-mobile-tb-toggle`) + !important on color
 * properties because themes like Astra and Hello often force button colors via
 * their own selectors and would otherwise paint our toggle in the theme's accent
 * (visitor reported pink — that's the theme's primary color leaking through). */
button.fef-is-gal-mobile-tb-toggle{
    display: none;
}
.fef-is-gal-mobile-tb-toggle-caret{
    transition: transform .2s ease;
    margin-left: auto;
    font-size: 12px;
}

@media (max-width: 768px){
    /* Show the toggle button on mobile — !important to override theme `display` */
    .fef-is-gallery-wrap button.fef-is-gal-mobile-tb-toggle,
    button.fef-is-gal-mobile-tb-toggle{
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 12px 16px !important;
        background: #ffffff !important;        /* WHITE background — overrides theme accent */
        background-color: #ffffff !important;
        background-image: none !important;     /* in case theme set a gradient */
        border: 1px solid #d0d0d0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #444444 !important;              /* DARK GRAY text */
        text-transform: none !important;        /* themes sometimes force uppercase */
        letter-spacing: normal !important;
        cursor: pointer !important;
        box-shadow: none !important;            /* override theme button shadows */
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color .2s ease, border-color .2s ease !important;
    }
    /* Hover/focus/active states — gray nudges, no pink */
    .fef-is-gallery-wrap button.fef-is-gal-mobile-tb-toggle:hover,
    .fef-is-gallery-wrap button.fef-is-gal-mobile-tb-toggle:focus,
    button.fef-is-gal-mobile-tb-toggle:hover,
    button.fef-is-gal-mobile-tb-toggle:focus{
        background: #f5f5f5 !important;
        background-color: #f5f5f5 !important;
        border-color: #b8b8b8 !important;
        color: #222222 !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .fef-is-gallery-wrap button.fef-is-gal-mobile-tb-toggle:active,
    button.fef-is-gal-mobile-tb-toggle:active{
        background: #ebebeb !important;
        background-color: #ebebeb !important;
    }
    /* Icon colors inside the button — must override theme's `button i { color }` rules */
    button.fef-is-gal-mobile-tb-toggle > i,
    button.fef-is-gal-mobile-tb-toggle > i:first-child,
    button.fef-is-gal-mobile-tb-toggle .fef-is-gal-mobile-tb-toggle-caret{
        color: #666666 !important;
        background: transparent !important;
    }
    button.fef-is-gal-mobile-tb-toggle > i:first-child{
        font-size: 15px !important;
    }
    .fef-is-gal-mobile-tb-toggle-label{
        flex: 1 !important;
        text-align: left !important;
        color: inherit !important;
    }

    /* COLLAPSE STATE (default on mobile): toolbar is HIDDEN.
     *
     * CRITICAL: there's another rule earlier in this file that does
     *   .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack { display: flex !important }
     * which has the SAME selector specificity as our hide rule. Same specificity →
     * source order wins → that rule would beat ours since it comes first... actually
     * the LATER rule wins at same specificity. But to be defensive against future
     * reorderings AND to also defeat any theme/Elementor rules, we go one step higher
     * by also targeting the specific .fef-tb-mobile-stack and .fef-tb-mobile-inline
     * variants explicitly (adds class specificity). */
    .fef-is-gallery-wrap .fef-is-gal-toolbar,
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack,
    .fef-is-gallery-wrap .fef-is-gal-toolbar.fef-tb-mobile-inline,
    .fef-is-gallery-wrap.fef-lp-wrap .fef-is-gal-toolbar,
    .fef-is-gallery-wrap.fef-lp-wrap .fef-is-gal-toolbar.fef-tb-mobile-stack,
    .fef-is-gallery-wrap.fef-lp-wrap .fef-is-gal-toolbar.fef-tb-mobile-inline{
        display: none !important;
    }
    /* When wrap has the expanded class, toolbar reappears. Match the same selector
     * combinations as the hide rule above so specificity is identical and source
     * order determines the winner — and this rule comes LATER, so it wins. */
    .fef-is-gallery-wrap.is-mobile-toolbar-expanded .fef-is-gal-toolbar,
    .fef-is-gallery-wrap.is-mobile-toolbar-expanded .fef-is-gal-toolbar.fef-tb-mobile-stack,
    .fef-is-gallery-wrap.is-mobile-toolbar-expanded .fef-is-gal-toolbar.fef-tb-mobile-inline,
    .fef-is-gallery-wrap.fef-lp-wrap.is-mobile-toolbar-expanded .fef-is-gal-toolbar,
    .fef-is-gallery-wrap.fef-lp-wrap.is-mobile-toolbar-expanded .fef-is-gal-toolbar.fef-tb-mobile-stack,
    .fef-is-gallery-wrap.fef-lp-wrap.is-mobile-toolbar-expanded .fef-is-gal-toolbar.fef-tb-mobile-inline{
        display: flex !important;
    }
    /* Flip the caret when expanded */
    .fef-is-gallery-wrap.is-mobile-toolbar-expanded .fef-is-gal-mobile-tb-toggle-caret{
        transform: rotate(180deg);
    }
}

/* ════════════════════════════════════════════════════════════════════
 * LOAD MORE SKELETON PLACEHOLDERS
 *
 * Inserted by JS at the bottom of the grid when the Load More button is clicked,
 * BEFORE the AJAX response arrives. They occupy real space in the masonry layout
 * with varied heights to mimic the staggered Pinterest look, plus an animated
 * shimmer that conveys "loading in progress" to the visitor.
 *
 * When the real items arrive, JS removes these skeletons and replaces them with
 * the actual content, then re-runs the masonry layout.
 *
 * The shimmer is pure CSS — no JS animation, no GIF, just a linear gradient
 * that slides horizontally across the box every 1.4s. Subtle gray-on-light-gray
 * keeps it visually quiet but visible.
 * ════════════════════════════════════════════════════════════════════ */
.fef-is-gal-skeleton{
    background: #d9dde2;             /* darker gray base — clearly visible as a placeholder */
    overflow: hidden;
    border-radius: 6px;               /* match the regular item border-radius */
    position: absolute;               /* positioned by masonry JS */
    /* opacity: 1 so they're visible immediately (override the .fef-mas-placed
       fade-in transition that real items use) */
    opacity: 1 !important;
    /* Don't show the green accent border or any item-hover effects */
    cursor: default;
    pointer-events: none;
}
.fef-is-gal-skeleton-shimmer{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #d9dde2 0%,
        #c6cad0 50%,
        #d9dde2 100%
    );
    background-size: 200% 100%;
    animation: fef-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes fef-skeleton-shimmer{
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pending-load items: real items just appended but waiting for their images to load.
 * Skeletons are still occupying the visible slots. We keep these items present in the
 * DOM (so the browser fetches their images normally — `loading="lazy"` only works on
 * images that are in/near the viewport, so off-screen parking would defer the load
 * indefinitely) but visually invisible via opacity:0 and pointer-events:none.
 *
 * Since the masonry layout skips these items (see fefMasonryLayout), they have no
 * top/left positioning set and would otherwise stack at the grid's origin (0,0).
 * The opacity:0 hides them entirely there; once their images finish loading, JS
 * removes this class and the next masonry pass positions them correctly. */
.fef-is-gal-masonry .fef-is-gal-item.fef-is-gal-pending-load{
    opacity: 0 !important;
    pointer-events: none;
    /* top/left/width unspecified — they'll fall back to whatever CSS defaults
       apply (typically top:0, left:0). Since opacity is 0, this is invisible. */
}