/* ================================================================
   FEF LOOP WIDGET v3
   ================================================================ */
.fef-lp-grid{display:grid;grid-template-columns:repeat(var(--lp-cols,3),1fr);gap:var(--lp-gap,16px)}
.fef-lp-list{display:flex;flex-direction:column;gap:var(--lp-gap,16px)}
.fef-lp-box{background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s,background .25s,border-color .25s}
.fef-lp-box:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}

/* ── Box hover effect presets ──
   The wrapper (.fef-lp-wrap / .fef-lp-slider-wrap) carries the chosen
   fef-lp-hover-{effect} class; --fef-hover-amt is set by the Strength
   control via Elementor's inline {{WRAPPER}}-scoped stylesheet. Grow/
   Shrink use a unitless ratio (e.g. 0.06 for a 6% scale change) — scale()
   requires a unitless number, so the PHP control sends a plain number for
   those two effects specifically, not a px value. Lift/Sink use a px
   length; Tilt uses degrees. */
.fef-lp-hover-grow .fef-lp-box{--fef-hover-amt:6}
.fef-lp-hover-grow .fef-lp-box:hover{transform:scale(calc(1 + var(--fef-hover-amt) / 100))}
.fef-lp-hover-shrink .fef-lp-box{--fef-hover-amt:6}
.fef-lp-hover-shrink .fef-lp-box:hover{transform:scale(calc(1 - var(--fef-hover-amt) / 100))}
.fef-lp-hover-lift .fef-lp-box{--fef-hover-amt:6}
.fef-lp-hover-lift .fef-lp-box:hover{transform:translateY(calc(var(--fef-hover-amt) * -1px))}
.fef-lp-hover-sink .fef-lp-box{--fef-hover-amt:6}
.fef-lp-hover-sink .fef-lp-box:hover{transform:translateY(calc(var(--fef-hover-amt) * 1px))}
.fef-lp-hover-tilt .fef-lp-box{--fef-hover-amt:6}
.fef-lp-hover-tilt .fef-lp-box:hover{transform:rotate(calc(var(--fef-hover-amt) * 1deg))}

/* Force the box's direct content (template output, list-item markup, etc.)
   to fill the box's full width and never shrink below it. Without this,
   a flex child with no explicit width can shrink to its own intrinsic
   content size — this is what was happening with slider items rendering
   smaller than their allotted slot. min-width:0 additionally allows the
   child to be sized down to the parent's width even if its own content
   would otherwise demand more (e.g. unbroken text/wide elements). */
.fef-lp-box>*{width:100%;flex:1 1 auto;min-width:0;box-sizing:border-box}
.fef-lp-header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#2e7d32;color:#fff;position:relative;overflow:hidden}
.fef-lp-header-link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;width:100%;transition:opacity .15s}
.fef-lp-header-link:hover{opacity:.92}
.fef-lp-header-text{flex:1;font-weight:700;font-size:15px;line-height:1.35}
.fef-lp-header-icon{font-size:18px;opacity:.9;flex-shrink:0}
.fef-lp-header-img{width:22px;height:22px;border-radius:4px;object-fit:cover;flex-shrink:0}
.fef-lp-header-gradient{position:absolute;left:0;top:0;width:5px;height:100%}
.fef-lp-header-arrow{font-size:16px;opacity:.65;flex-shrink:0;transition:opacity .2s,transform .2s}
.fef-lp-header:hover .fef-lp-header-arrow{opacity:1;transform:translateX(2px)}
.fef-lp-header-count{background:rgba(255,255,255,.2);padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;flex-shrink:0}
.fef-lp-body{flex:1;display:flex;flex-direction:column}
.fef-lp-item{padding:5px 16px;font-size:14px;line-height:1.55;color:#333;display:flex;align-items:center;gap:6px;transition:color .15s,background .15s}
.fef-lp-item:hover{color:#1565c0}
.fef-lp-item a{color:inherit;text-decoration:none;flex:1}
.fef-lp-item a:hover{text-decoration:none}
.fef-lp-item-l2{color:#555}.fef-lp-item-l3{color:#777;font-size:13px}
.fef-lp-term-img{width:28px;height:28px;border-radius:4px;object-fit:cover;flex-shrink:0}
.fef-lp-flat-item{padding:0;flex-direction:column;align-items:stretch;gap:0}
.fef-lp-post-img{width:100%;height:120px;overflow:hidden;position:relative}
.fef-lp-post-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:opacity .3s ease}
.fef-lp-item-content{padding:10px 14px}
.fef-lp-item-title{font-weight:600;font-size:14px;display:block;line-height:1.4}
.fef-lp-item-title-link{color:inherit;text-decoration:none}
.fef-lp-item-title-link:hover{color:#1565c0}
.fef-lp-item-excerpt{font-size:13px;color:#777;margin-top:4px;line-height:1.5}
.fef-lp-item-meta-row{display:flex;gap:12px;margin-top:6px;font-size:12px;color:#999}
.fef-lp-item-meta-row i{margin-right:3px}
.fef-lp-item-metas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fef-lp-item-meta{font-size:12px;color:#999;background:#f5f5f5;padding:2px 8px;border-radius:4px}

/* No-image view */
.fef-lp-noimage .fef-lp-post-img{display:none!important}
.fef-lp-wrap.noimage{display:flex;flex-direction:column;gap:var(--lp-gap,16px)}
.fef-lp-wrap.noimage .fef-lp-flat-item{flex-direction:row;align-items:center}
.fef-lp-wrap.noimage .fef-lp-item-content{padding:8px 14px}
.fef-lp-noimage .fef-lp-post-img{display:none}

/* Masonry */
.fef-lp-masonry{display:block;column-count:var(--lp-cols,3);column-gap:var(--lp-gap,16px)}
.fef-lp-masonry>.fef-lp-box,.fef-lp-masonry>.fef-lp-flat-item{break-inside:avoid;margin-bottom:var(--lp-gap,16px)}

/* Equal height */
.fef-lp-equal-h{align-items:stretch}
.fef-lp-equal-h>.fef-lp-box,.fef-lp-equal-h>.fef-lp-flat-item{display:flex;flex-direction:column}
.fef-lp-equal-h .fef-lp-item-content{flex:1}

/* Lazy load */
.fef-lp-lazy .fef-lp-post-img img{transition:opacity .4s ease}
.fef-lp-lazy .fef-lp-post-img img[loading="lazy"]:not([src]){opacity:0}
.fef-lp-count{font-size:13px;color:#999;font-weight:400;margin-left:4px;flex-shrink:0}
.fef-lp-count-badge{background:#e0e0e0;color:#333;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;line-height:1.5}
.fef-lp-hidden{display:none}
.fef-lp-showmore{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 16px;margin:4px 12px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px;color:#333;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.fef-lp-showmore:hover{background:#e8e8e8}
.fef-lp-showmore i{font-size:10px;transition:transform .3s}
.fef-lp-showmore[data-collapsed="0"] i{transform:rotate(180deg)}
.fef-lp-total{font-size:13px;color:#666;margin-bottom:10px;font-weight:500}
.fef-lp-empty{text-align:center;color:#94a3b8;padding:30px;font-size:14px}
.fef-lp-pagination{display:flex;justify-content:center;gap:6px;margin-top:20px;padding:10px 0}
.fef-lp-pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;color:#333;font-size:13px;font-weight:500;text-decoration:none;transition:all .2s}
.fef-lp-pg:hover{background:#e0e0e0}
.fef-lp-pg.active{background:#2e7d32;color:#fff;border-color:#2e7d32}
.fef-lp-injected{position:relative;border:2px solid #ffd54f;background:#fffde7}
.fef-lp-inject-badge{position:absolute;top:6px;right:6px;background:#ff9800;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;z-index:2;text-transform:uppercase;letter-spacing:.5px}
/* Slider */
.fef-lp-slider-wrap{position:relative;width:100%;overflow:hidden}
.fef-lp-slider-viewport{overflow:hidden;width:100%}
.fef-lp-slider-track{display:flex;will-change:transform}
.fef-lp-slider-track>.fef-lp-box{flex:0 0 auto;min-width:0;box-sizing:border-box}
.fef-lp-sl-arrow.fef-lp-sl-disabled{opacity:.35;cursor:default;pointer-events:none}
.fef-lp-sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.1);color:#333;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.fef-lp-sl-arrow:hover{background:rgba(0,0,0,.12)}
.fef-lp-sl-prev{left:8px}.fef-lp-sl-next{right:8px}
.fef-lp-sl-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.fef-lp-sl-dot{width:8px;height:8px;border-radius:50px;background:rgba(0,0,0,.15);cursor:pointer;transition:all .3s}
.fef-lp-sl-dot.active{background:#2e7d32;width:20px}

/* ── Arrow placement presets ──
   DOM order is always: [viewport] [prev arrow] [next arrow] [dots].
   For non-default placements, .fef-lp-slider-wrap becomes a wrapping flex
   row. The viewport and dots get flex-basis:100% so they always start
   their own line — this leaves the two arrow buttons (no forced basis)
   sharing a line together, positioned above or below the viewport via
   `order` (top placements: order 1, before the viewport's order 2;
   bottom placements: order 3, after it). justify-content on the wrap
   then aligns that shared arrow-pair line as a whole: left/center/right. */
.fef-lp-slider-wrap[class*="fef-lp-arrows-"]{display:flex;flex-flow:row wrap}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-slider-viewport{order:2;flex-basis:100%;width:100%}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-dots{order:4;flex-basis:100%}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-arrow{position:static;top:auto;left:auto;right:auto;transform:none;margin:0}

/* Top placements: arrows (order:1) before the viewport (order:2). */
.fef-lp-arrows-top-left .fef-lp-sl-prev,.fef-lp-arrows-top-center .fef-lp-sl-prev,.fef-lp-arrows-top-right .fef-lp-sl-prev,
.fef-lp-arrows-top-left .fef-lp-sl-next,.fef-lp-arrows-top-center .fef-lp-sl-next,.fef-lp-arrows-top-right .fef-lp-sl-next{order:1}

/* Bottom placements: arrows (order:3) after the viewport (order:2). */
.fef-lp-arrows-bottom-left .fef-lp-sl-prev,.fef-lp-arrows-bottom-center .fef-lp-sl-prev,.fef-lp-arrows-bottom-right .fef-lp-sl-prev,
.fef-lp-arrows-bottom-left .fef-lp-sl-next,.fef-lp-arrows-bottom-center .fef-lp-sl-next,.fef-lp-arrows-bottom-right .fef-lp-sl-next{order:3}

/* Pair alignment: left / center / right. */
.fef-lp-arrows-top-left,.fef-lp-arrows-bottom-left{justify-content:flex-start}
.fef-lp-arrows-top-center,.fef-lp-arrows-bottom-center{justify-content:center}
.fef-lp-arrows-top-right,.fef-lp-arrows-bottom-right{justify-content:flex-end}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-prev{margin-right:8px}

/* Hover animations */
.fef-lp-sl-anim-grow:hover{transform:scale(1.12)}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-anim-grow:hover{transform:scale(1.12)}
.fef-lp-sl-anim-move-left:hover{transform:translate(-4px,-50%)}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-anim-move-left:hover{transform:translateX(-4px)}
.fef-lp-sl-anim-move-right:hover{transform:translate(4px,-50%)}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-anim-move-right:hover{transform:translateX(4px)}
.fef-lp-sl-anim-pulsate:hover{animation:fefLpPulsate .7s ease-in-out infinite}
@keyframes fefLpPulsate{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.12)}}
.fef-lp-slider-wrap[class*="fef-lp-arrows-"] .fef-lp-sl-anim-pulsate:hover{animation:fefLpPulsateFlat .7s ease-in-out infinite}
@keyframes fefLpPulsateFlat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

@media(max-width:767px){.fef-lp-sl-arrow{width:32px;height:32px;font-size:12px}}
/* ================================================================
   VIEW COUNT BADGE — 👁 N views
   ================================================================ */
.fef-lp-item-views{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border-radius:10px;
    background:transparent;
    color:#64748b;
    font-size:12px;
    line-height:1.4;
    white-space:nowrap;
    width:fit-content;
    margin-top:6px
}
.fef-lp-item-views i{font-size:12px;opacity:0.9}
.fef-lp-item-views-num{font-weight:600}
.fef-lp-item-views-label{opacity:0.75}

/* ================================================================
   READ MORE BUTTON
   Three visual styles: button (default), plain link, underlined link.
   Selectable per widget instance via the "Style" content control.
   ================================================================ */
.fef-lp-item-read-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    transition:background-color 0.15s ease,color 0.15s ease,transform 0.1s ease;
    width:fit-content;
    margin-top:12px
}
.fef-lp-item-read-more i{font-size:0.9em;transition:transform 0.15s ease}
.fef-lp-item-read-more:hover i{transform:translateX(3px)}

/* Button style — filled pill */
.fef-lp-rm-button{
    padding:10px 20px;
    border-radius:6px;
    background:#1e293b;
    color:#fff
}
.fef-lp-rm-button:hover{background:#334155;color:#fff}
.fef-lp-rm-button:active{transform:translateY(1px)}

/* Plain text link */
.fef-lp-rm-link{
    color:#3b82f6;
    padding:0
}
.fef-lp-rm-link:hover{color:#2563eb}

/* Underlined link */
.fef-lp-rm-underline{
    color:#3b82f6;
    padding:0;
    border-bottom:1px solid currentColor;
    padding-bottom:2px
}
.fef-lp-rm-underline:hover{color:#2563eb}

/* Full-width alignment support */
.fef-lp-item-content{display:flex;flex-direction:column;align-items:flex-start}

/* ================================================================
   MANUAL ITEMS — PLACEMENT VARIANTS
   Overrides the default column flow of .fef-lp-item-content
   ================================================================ */
.fef-lp-manual-item{display:flex;overflow:hidden}
.fef-lp-manual-img-top{flex-direction:column}
.fef-lp-manual-img-bottom{flex-direction:column-reverse}
.fef-lp-manual-img-left{flex-direction:row;align-items:stretch}
.fef-lp-manual-img-right{flex-direction:row-reverse;align-items:stretch}
.fef-lp-manual-item .fef-lp-post-img{flex-shrink:0}
.fef-lp-manual-img-left .fef-lp-post-img,
.fef-lp-manual-img-right .fef-lp-post-img{width:40%;height:auto;min-height:120px}
.fef-lp-manual-img-left .fef-lp-item-content,
.fef-lp-manual-img-right .fef-lp-item-content{flex:1;padding:16px}

/* ================================================================
   eCommerce (WooCommerce Products) — Full styling
   ================================================================ */
.fef-lp-wc-item{position:relative;display:flex;flex-direction:column;overflow:hidden}

/* Image wrap — holds badges, image(s), and action icons */
.fef-lp-wc-image-wrap{
    position:relative;
    overflow:hidden;
    background:#f8fafc
}
.fef-lp-wc-image-link{display:block;position:relative}
.fef-lp-wc-img{width:100%;height:auto;display:block;transition:opacity 0.3s ease,transform 0.4s ease}
.fef-lp-wc-img-secondary{position:absolute;top:0;left:0;opacity:0;pointer-events:none}

/* Gallery swap — hover */
.fef-lp-wc-gallery-gallery.fef-lp-wc-trigger-hover .fef-lp-wc-image-wrap:hover .fef-lp-wc-img-primary{opacity:0}
.fef-lp-wc-gallery-gallery.fef-lp-wc-trigger-hover .fef-lp-wc-image-wrap:hover .fef-lp-wc-img-secondary{opacity:1}

/* Gallery swap — click (JS toggles .fef-lp-wc-swap) */
.fef-lp-wc-gallery-gallery.fef-lp-wc-trigger-click .fef-lp-wc-swap .fef-lp-wc-img-primary{opacity:0}
.fef-lp-wc-gallery-gallery.fef-lp-wc-trigger-click .fef-lp-wc-swap .fef-lp-wc-img-secondary{opacity:1}
.fef-lp-wc-gallery-gallery.fef-lp-wc-trigger-click .fef-lp-wc-image-wrap{cursor:pointer}

/* Zoom subtle on hover */
.fef-lp-wc-image-wrap:hover .fef-lp-wc-img{transform:scale(1.03)}

/* Badges — stack in top-left */
.fef-lp-wc-badges{
    position:absolute;top:10px;left:10px;z-index:3;
    display:flex;flex-direction:column;gap:4px;align-items:flex-start
}
.fef-lp-wc-badge{
    display:inline-block;
    padding:3px 10px;
    font-size:11px;font-weight:700;letter-spacing:0.5px;
    text-transform:uppercase;
    color:#fff;
    border-radius:4px;
    line-height:1.4
}
.fef-lp-wc-badge-sale{background:#dc2626}
.fef-lp-wc-badge-discount{background:#0f172a}
.fef-lp-wc-badge-new{background:#059669}
.fef-lp-wc-badge-featured{background:#7c3aed}
.fef-lp-wc-badge-oos{background:#64748b}

/* Action icons — top right by default */
.fef-lp-wc-actions{
    position:absolute;z-index:3;
    display:flex;flex-direction:column;gap:6px;
    opacity:0;transform:translateX(6px);
    transition:opacity 0.2s ease,transform 0.2s ease
}
.fef-lp-wc-actions-tr .fef-lp-wc-actions{top:10px;right:10px}
.fef-lp-wc-actions-tl .fef-lp-wc-actions{top:10px;left:10px;transform:translateX(-6px)}
.fef-lp-wc-actions-br .fef-lp-wc-actions{bottom:10px;right:10px}
.fef-lp-wc-actions-bl .fef-lp-wc-actions{bottom:10px;left:10px;transform:translateX(-6px)}
.fef-lp-wc-actions-over-hover .fef-lp-wc-actions{
    top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);
    flex-direction:row;gap:10px
}
.fef-lp-wc-image-wrap:hover .fef-lp-wc-actions{opacity:1;transform:translateX(0)}
.fef-lp-wc-actions-tl .fef-lp-wc-image-wrap:hover .fef-lp-wc-actions,
.fef-lp-wc-actions-bl .fef-lp-wc-image-wrap:hover .fef-lp-wc-actions{transform:translateX(0)}
.fef-lp-wc-actions-over-hover .fef-lp-wc-image-wrap:hover .fef-lp-wc-actions{transform:translate(-50%,-50%) scale(1)}

.fef-lp-wc-action{
    width:36px;height:36px;
    background:#fff;color:#1e293b;
    border:none;border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
    transition:background 0.15s ease,color 0.15s ease,transform 0.1s ease
}
.fef-lp-wc-action:hover{background:#1e293b;color:#fff;transform:scale(1.1)}
.fef-lp-wc-action.active{background:#dc2626;color:#fff}
.fef-lp-wc-wishlist.active i{font-weight:900}

/* Content area */
.fef-lp-wc-content{padding:14px}
.fef-lp-wc-cats{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.fef-lp-wc-cats a{color:inherit;text-decoration:none}
.fef-lp-wc-cats a:hover{color:#1e293b}

.fef-lp-wc-item .fef-lp-item-title{font-size:15px;font-weight:600;color:#1e293b;line-height:1.4;margin:2px 0}
.fef-lp-wc-item .fef-lp-item-title-link{text-decoration:none}

.fef-lp-wc-description{font-size:13px;color:#64748b;line-height:1.5;margin:0 0 8px}

.fef-lp-wc-rating{color:#f59e0b;font-size:12px;margin:4px 0;display:flex;align-items:center;gap:4px}
.fef-lp-wc-rating-count{color:#94a3b8;font-size:11px}
.fef-lp-wc-comments{font-size:12px;color:#64748b;margin:4px 0}

.fef-lp-wc-price{font-size:16px;font-weight:700;color:#1e293b;margin:6px 0}
.fef-lp-wc-price del{color:#94a3b8;font-weight:400;margin-right:8px;font-size:14px}
.fef-lp-wc-price ins{background:none;text-decoration:none;color:#dc2626}
.fef-lp-wc-price .woocommerce-Price-amount{font-weight:700}

.fef-lp-wc-stock{font-size:12px;margin:4px 0;font-weight:500}
.fef-lp-wc-stock-instock{color:#059669}
.fef-lp-wc-stock-outofstock{color:#dc2626}
.fef-lp-wc-stock-onbackorder{color:#d97706}

/* Cart row */
.fef-lp-wc-cart-row{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.fef-lp-wc-qty{
    display:inline-flex;align-items:stretch;
    background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;
    overflow:hidden
}
.fef-lp-wc-qty button{
    background:transparent;border:none;
    width:30px;font-size:14px;font-weight:600;cursor:pointer;
    color:#1e293b
}
.fef-lp-wc-qty button:hover{background:#e2e8f0}
.fef-lp-wc-qty-input{
    width:40px;text-align:center;background:transparent;border:none;
    font-size:13px;font-weight:600;outline:none;
    -moz-appearance:textfield
}
.fef-lp-wc-qty-input::-webkit-outer-spin-button,
.fef-lp-wc-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.fef-lp-wc-atc{
    flex:1;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:#1e293b;color:#fff;
    border:none;border-radius:6px;
    padding:10px 16px;
    font-size:13px;font-weight:600;
    cursor:pointer;
    transition:background 0.15s ease,transform 0.1s ease
}
.fef-lp-wc-atc:hover{background:#334155}
.fef-lp-wc-atc:disabled{opacity:0.6;cursor:not-allowed}
.fef-lp-wc-atc.added{background:#059669}
.fef-lp-wc-atc .fa-spinner{animation:fef-lp-wc-spin 0.8s linear infinite}
@keyframes fef-lp-wc-spin{to{transform:rotate(360deg)}}

/* Out-of-stock item dimming */
.fef-lp-wc-oos .fef-lp-wc-img{filter:grayscale(0.4);opacity:0.85}

/* ================================================================
   QUICK VIEW MODAL
   ================================================================ */
.fef-lp-wc-qv-modal{position:fixed;inset:0;z-index:9999}
.fef-lp-wc-qv-backdrop{
    position:absolute;inset:0;
    background:rgba(15,23,42,0.6);
    backdrop-filter:blur(2px);
    opacity:0;transition:opacity 0.2s ease
}
.fef-lp-wc-qv-modal.open .fef-lp-wc-qv-backdrop{opacity:1}
.fef-lp-wc-qv-dialog{
    position:relative;
    max-width:900px;width:90%;max-height:90vh;
    margin:5vh auto 0;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    opacity:0;transform:scale(0.95) translateY(20px);
    transition:opacity 0.25s ease,transform 0.25s ease
}
.fef-lp-wc-qv-modal.open .fef-lp-wc-qv-dialog{opacity:1;transform:scale(1) translateY(0)}
.fef-lp-wc-qv-close{
    position:absolute;top:12px;right:12px;z-index:2;
    width:36px;height:36px;
    background:#fff;color:#1e293b;
    border:none;border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    cursor:pointer;
    font-size:22px;line-height:1;
    display:flex;align-items:center;justify-content:center
}
.fef-lp-wc-qv-content{overflow-y:auto;max-height:90vh}
.fef-lp-wc-qv-loading{padding:60px;text-align:center;color:#94a3b8}

.fef-lp-wc-qv{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}
@media(max-width:768px){.fef-lp-wc-qv{grid-template-columns:1fr}}
.fef-lp-wc-qv-media{background:#f8fafc;border-radius:8px;padding:12px}
.fef-lp-wc-qv-main{width:100%;height:auto;border-radius:6px;display:block}
.fef-lp-wc-qv-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fef-lp-wc-qv-thumb{
    width:60px;height:60px;padding:0;
    border:2px solid transparent;background:#fff;border-radius:6px;
    cursor:pointer;overflow:hidden
}
.fef-lp-wc-qv-thumb.active{border-color:#1e293b}
.fef-lp-wc-qv-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.fef-lp-wc-qv-info{display:flex;flex-direction:column;gap:10px;padding:12px 8px}
.fef-lp-wc-qv-cats{font-size:12px;color:#64748b;text-transform:uppercase}
.fef-lp-wc-qv-cats a{color:inherit;text-decoration:none}
.fef-lp-wc-qv-title{font-size:24px;font-weight:700;color:#1e293b;margin:0}
.fef-lp-wc-qv-price{font-size:20px;font-weight:700;color:#1e293b}
.fef-lp-wc-qv-price del{color:#94a3b8;font-weight:400;margin-right:10px;font-size:16px}
.fef-lp-wc-qv-price ins{background:none;text-decoration:none;color:#dc2626}
.fef-lp-wc-qv-rating{font-size:13px;color:#64748b;display:flex;align-items:center;gap:2px}
.fef-lp-wc-qv-desc{font-size:14px;color:#475569;line-height:1.6}
.fef-lp-wc-qv-desc p{margin:0 0 10px}
.fef-lp-wc-qv-cart-row{display:flex;gap:8px;margin-top:8px}
.fef-lp-wc-qv-full-link{
    display:inline-block;margin-top:4px;
    font-size:13px;color:#3b82f6;text-decoration:none;font-weight:500
}
.fef-lp-wc-qv-full-link:hover{text-decoration:underline}

/* ================================================================
   LOADERS
   Per-item overlay + common overlay for the whole grid. Powered by
   CSS variables set by the Style controls, so a single palette flows
   across every loader type.
   ================================================================ */
.fef-lp-loader{
    --fef-loader-color: #1e293b;
    --fef-loader-size: 40px;
    --fef-loader-speed: 1s;

    position:absolute;inset:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:12px;
    background:rgba(255,255,255,0.85);
    z-index:10;
    transition:opacity 0.35s ease,visibility 0.35s ease
}
.fef-lp-loader-text{
    font-size:12px;
    color:#64748b;
    font-weight:500;
    letter-spacing:0.3px
}
.fef-lp-loader-hidden{opacity:0;visibility:hidden;pointer-events:none}

/* Ensure items are positioning contexts so the overlay stays inside */
.fef-lp-item{position:relative}

/* Common (single overlay for whole grid) */
.fef-lp-common-loader{
    position:absolute;inset:0;z-index:20;
    pointer-events:none
}
.fef-lp-common-loader .fef-lp-loader{pointer-events:auto}
.fef-lp-wrap{position:relative}

/* ── Loader visuals ── */
.fef-lp-loader-visual{
    width:var(--fef-loader-size);
    height:var(--fef-loader-size)
}

/* Spinner — classic rotating quarter-arc */
.fef-lp-loader-visual-spinner{
    border:3px solid rgba(30,41,59,0.15);
    border-top-color:var(--fef-loader-color);
    border-radius:50%;
    animation:fef-lp-spin var(--fef-loader-speed) linear infinite
}
@keyframes fef-lp-spin{to{transform:rotate(360deg)}}

/* Ring — dual arc */
.fef-lp-loader-visual-ring{
    border:3px solid transparent;
    border-top-color:var(--fef-loader-color);
    border-bottom-color:var(--fef-loader-color);
    border-radius:50%;
    animation:fef-lp-spin var(--fef-loader-speed) linear infinite
}

/* Dots — three bouncing dots */
.fef-lp-loader-visual-dots{
    display:flex;align-items:center;justify-content:center;gap:6px;
    background:transparent
}
.fef-lp-loader-visual-dots span{
    width:calc(var(--fef-loader-size) * 0.22);
    height:calc(var(--fef-loader-size) * 0.22);
    background:var(--fef-loader-color);
    border-radius:50%;
    animation:fef-lp-dots calc(var(--fef-loader-speed) * 1.2) ease-in-out infinite
}
.fef-lp-loader-visual-dots span:nth-child(2){animation-delay:calc(var(--fef-loader-speed) * 0.15)}
.fef-lp-loader-visual-dots span:nth-child(3){animation-delay:calc(var(--fef-loader-speed) * 0.3)}
@keyframes fef-lp-dots{
    0%,60%,100%{transform:scale(1);opacity:0.5}
    30%       {transform:scale(1.4);opacity:1}
}

/* Bars — vertical bars scaling in sequence */
.fef-lp-loader-visual-bars{
    display:flex;align-items:center;justify-content:center;gap:3px
}
.fef-lp-loader-visual-bars span{
    width:calc(var(--fef-loader-size) * 0.12);
    height:100%;
    background:var(--fef-loader-color);
    border-radius:2px;
    animation:fef-lp-bars var(--fef-loader-speed) ease-in-out infinite
}
.fef-lp-loader-visual-bars span:nth-child(1){animation-delay:0s}
.fef-lp-loader-visual-bars span:nth-child(2){animation-delay:calc(var(--fef-loader-speed) * 0.1)}
.fef-lp-loader-visual-bars span:nth-child(3){animation-delay:calc(var(--fef-loader-speed) * 0.2)}
.fef-lp-loader-visual-bars span:nth-child(4){animation-delay:calc(var(--fef-loader-speed) * 0.3)}
.fef-lp-loader-visual-bars span:nth-child(5){animation-delay:calc(var(--fef-loader-speed) * 0.4)}
@keyframes fef-lp-bars{
    0%,40%,100%{transform:scaleY(0.3)}
    20%       {transform:scaleY(1)}
}

/* Pulse — one big circle */
.fef-lp-loader-visual-pulse{
    background:var(--fef-loader-color);
    border-radius:50%;
    animation:fef-lp-pulse var(--fef-loader-speed) ease-in-out infinite
}
@keyframes fef-lp-pulse{
    0%,100%{transform:scale(0.4);opacity:0.35}
    50%    {transform:scale(1);   opacity:1}
}

/* Grid — 3x3 dots pulsing */
.fef-lp-loader-visual-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3px
}
.fef-lp-loader-visual-grid span{
    background:var(--fef-loader-color);
    border-radius:2px;
    animation:fef-lp-grid calc(var(--fef-loader-speed) * 1.4) ease-in-out infinite
}
.fef-lp-loader-visual-grid span:nth-child(1){animation-delay:0s}
.fef-lp-loader-visual-grid span:nth-child(2){animation-delay:0.1s}
.fef-lp-loader-visual-grid span:nth-child(3){animation-delay:0.2s}
.fef-lp-loader-visual-grid span:nth-child(4){animation-delay:0.1s}
.fef-lp-loader-visual-grid span:nth-child(5){animation-delay:0.2s}
.fef-lp-loader-visual-grid span:nth-child(6){animation-delay:0.3s}
.fef-lp-loader-visual-grid span:nth-child(7){animation-delay:0.2s}
.fef-lp-loader-visual-grid span:nth-child(8){animation-delay:0.3s}
.fef-lp-loader-visual-grid span:nth-child(9){animation-delay:0.4s}
@keyframes fef-lp-grid{
    0%,70%,100%{transform:scale(1);opacity:1}
    35%       {transform:scale(0);opacity:0.3}
}

/* Wave — five bars in a wave motion */
.fef-lp-loader-visual-wave{
    display:flex;align-items:center;justify-content:center;gap:3px
}
.fef-lp-loader-visual-wave span{
    width:calc(var(--fef-loader-size) * 0.1);
    height:60%;
    background:var(--fef-loader-color);
    border-radius:2px;
    animation:fef-lp-wave var(--fef-loader-speed) ease-in-out infinite
}
.fef-lp-loader-visual-wave span:nth-child(1){animation-delay:0s}
.fef-lp-loader-visual-wave span:nth-child(2){animation-delay:0.1s}
.fef-lp-loader-visual-wave span:nth-child(3){animation-delay:0.2s}
.fef-lp-loader-visual-wave span:nth-child(4){animation-delay:0.3s}
.fef-lp-loader-visual-wave span:nth-child(5){animation-delay:0.4s}
@keyframes fef-lp-wave{
    0%,40%,100%{transform:scaleY(0.4)}
    20%       {transform:scaleY(1)}
}

/* Ripple — two expanding circles */
.fef-lp-loader-visual-ripple{position:relative}
.fef-lp-loader-visual-ripple span{
    position:absolute;top:50%;left:50%;
    width:0;height:0;
    border:3px solid var(--fef-loader-color);
    border-radius:50%;
    opacity:1;
    transform:translate(-50%, -50%);
    animation:fef-lp-ripple calc(var(--fef-loader-speed) * 1.5) cubic-bezier(0,0.2,0.8,1) infinite
}
.fef-lp-loader-visual-ripple span:nth-child(2){animation-delay:calc(var(--fef-loader-speed) * 0.5)}
@keyframes fef-lp-ripple{
    0%  {width:0;height:0;opacity:1}
    100%{width:100%;height:100%;opacity:0}
}

/* Logo — user's own image with various motion presets */
.fef-lp-loader-visual-logo img{
    width:100%;height:100%;
    display:block;
    object-fit:contain
}
.fef-lp-loader-logo-spin img{animation:fef-lp-spin var(--fef-loader-speed) linear infinite}
.fef-lp-loader-logo-pulse img{animation:fef-lp-pulse-logo var(--fef-loader-speed) ease-in-out infinite;transform-origin:center}
@keyframes fef-lp-pulse-logo{
    0%,100%{transform:scale(0.85);opacity:0.7}
    50%    {transform:scale(1);   opacity:1}
}
.fef-lp-loader-logo-flip img{animation:fef-lp-flip calc(var(--fef-loader-speed) * 1.5) ease-in-out infinite}
@keyframes fef-lp-flip{
    0%,100%{transform:rotateY(0deg)}
    50%    {transform:rotateY(180deg)}
}
.fef-lp-loader-logo-bob img{animation:fef-lp-bob var(--fef-loader-speed) ease-in-out infinite}
@keyframes fef-lp-bob{
    0%,100%{transform:translateY(-5%)}
    50%    {transform:translateY(5%)}
}

/* Respect motion preference */
@media (prefers-reduced-motion:reduce){
    .fef-lp-loader-visual,
    .fef-lp-loader-visual *,
    .fef-lp-loader-visual-logo img{animation:none !important}
}

/* ================================================================
   ROW EXPAND PANEL
   Inserted below a full row of items when the user clicks a card.
   Spans full grid width so subsequent items reflow correctly.
   ================================================================ */
.fef-lp-item-clickable{cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease,opacity 0.3s ease}
.fef-lp-item-clickable:hover{transform:translateY(-2px)}

/* Highlighted "active" card — the one that opened the panel */
.fef-lp-item-clickable.fef-lp-item-active{
    --fef-focus-color:#3b82f6;
    box-shadow:0 0 0 3px var(--fef-focus-color),0 6px 20px rgba(0,0,0,0.08);
    z-index:2;
    position:relative
}
/* Dim non-active cards when a panel is open (opacity value comes from control) */
.fef-lp-wrap.fef-lp-has-active .fef-lp-item:not(.fef-lp-item-active){
    transition:opacity 0.3s ease
}

.fef-lp-row-expand{
    grid-column:1 / -1;
    background:#f8fafc;
    border-radius:8px;
    overflow:hidden;
    position:relative;
    opacity:0;
    max-height:0;
    transition:max-height 0.35s ease,opacity 0.25s ease,margin 0.35s ease
}
.fef-lp-row-expand.fef-lp-row-expand-open{
    opacity:1;
    max-height:9999px;
    margin:16px 0
}

.fef-lp-row-expand-inner{
    position:relative;
    padding:32px 24px
}
.fef-lp-row-expand-body{position:relative}

/* Close button — offset comes from a CSS variable, position from a prefix class */
.fef-lp-row-expand-close{
    --fef-close-offset:12px;
    position:absolute;
    background:transparent;border:none;
    width:32px;height:32px;
    cursor:pointer;
    color:#64748b;
    font-size:18px;
    line-height:1;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    z-index:5;
    transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease,transform 0.1s ease
}
.fef-lp-row-expand-close:hover{background:rgba(0,0,0,0.05)}
.fef-lp-row-expand-close:active{transform:scale(0.92)}

/* Position variants — the widget emits fef-lp-close-{tr|tl|br|bl} as a prefix class on the outer wrapper */
.fef-lp-close-tr .fef-lp-row-expand-close{top:var(--fef-close-offset);right:var(--fef-close-offset)}
.fef-lp-close-tl .fef-lp-row-expand-close{top:var(--fef-close-offset);left:var(--fef-close-offset)}
.fef-lp-close-br .fef-lp-row-expand-close{bottom:var(--fef-close-offset);right:var(--fef-close-offset)}
.fef-lp-close-bl .fef-lp-row-expand-close{bottom:var(--fef-close-offset);left:var(--fef-close-offset)}
/* Default when no prefix present (older cached settings) */
.fef-lp-row-expand-close{top:var(--fef-close-offset);right:var(--fef-close-offset)}

.fef-lp-row-expand-loading{
    display:flex;align-items:center;justify-content:center;
    padding:40px;
    color:#94a3b8;
    font-size:13px
}

/* Fade-only animation variant */
.fef-lp-row-expand-anim-fade{transition:opacity 0.25s ease,margin 0.25s ease}
.fef-lp-row-expand-anim-fade:not(.fef-lp-row-expand-open){display:none}
.fef-lp-row-expand-anim-fade.fef-lp-row-expand-open{max-height:none}

/* No animation variant */
.fef-lp-row-expand-anim-none{transition:none}
.fef-lp-row-expand-anim-none.fef-lp-row-expand-open{max-height:none}

/* Mobile responsive — force full width on small screens even if the desktop
   Width control set something narrower, so the panel doesn't crop off. */
@media (max-width:768px){
    .fef-lp-row-expand{width:100% !important;margin-left:0 !important;margin-right:0 !important}
    .fef-lp-row-expand-inner{padding:20px 16px}
    .fef-lp-row-expand-close{--fef-close-offset:8px}
}

/* List view — row is one column so full width already works */
.fef-lp-list .fef-lp-row-expand{grid-column:auto}

/* ================================================================
   CUSTOM MODAL — self-contained lightbox for the "Open Custom Modal"
   click action. No dependency on Elementor Pro popups.
   ================================================================ */
.fef-lp-modal{
    position:fixed;inset:0;z-index:9999
}
.fef-lp-modal-backdrop{
    position:absolute;inset:0;
    background:rgba(15,23,42,0.65);
    backdrop-filter:blur(3px);
    opacity:0;transition:opacity 0.25s ease
}
.fef-lp-modal.fef-lp-modal-open .fef-lp-modal-backdrop{opacity:1}

.fef-lp-modal-dialog{
    position:relative;
    max-width:1000px;width:92%;max-height:90vh;
    margin:5vh auto 0;
    background:#fff;
    border-radius:12px;
    overflow:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
    opacity:0;transform:scale(0.95) translateY(20px);
    transition:opacity 0.28s ease,transform 0.28s cubic-bezier(0.16,1,0.3,1)
}
.fef-lp-modal.fef-lp-modal-open .fef-lp-modal-dialog{
    opacity:1;transform:scale(1) translateY(0)
}
.fef-lp-modal-close{
    position:absolute;top:12px;right:12px;z-index:2;
    width:36px;height:36px;
    background:#fff;color:#1e293b;
    border:none;border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.18);
    cursor:pointer;
    font-size:22px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background 0.15s ease,color 0.15s ease,transform 0.1s ease
}
.fef-lp-modal-close:hover{background:#1e293b;color:#fff;transform:scale(1.05)}
.fef-lp-modal-content{padding:24px}
.fef-lp-modal-loading{
    padding:60px;text-align:center;color:#94a3b8;font-size:14px
}

/* Elementor content inside the modal — reset any inherited constraints */
.fef-lp-modal-content .elementor{width:100%}

@media(max-width:768px){
    .fef-lp-modal-dialog{width:100%;max-height:100vh;margin:0;border-radius:0}
    .fef-lp-modal-content{padding:16px 12px}
}

/* ================================================================
   GRID/LIST VIEW TOGGLE
   ================================================================ */
.fef-lp-wrap {
    position: relative;
}
.fef-lp-view-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    gap: 4px;
}
.fef-lp-view-toggle button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fef-lp-view-toggle button:hover {
    background: #f8fafc;
}
.fef-lp-view-toggle button.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* ================================================================
   TOTAL COUNT — text/number separated for independent styling
   ================================================================ */
.fef-lp-total {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.fef-lp-total-text {
    color: #64748b;
    font-size: 13px;
}
.fef-lp-total-number {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}/* ================================================================
   LIST VIEW — horizontal card layout (image left, content right)

   Fixes the bug where toggling from Grid to List left the item cards
   as single vertical cards. In list view now each item goes full-width,
   image column left, content column right (multi-row: title, excerpt,
   meta row, tags, read-more, etc. stack one below another on the right).
   Falls back to vertical layout on mobile so cards stay readable.

   Also handles all four card variants the loop can output:
     - .fef-lp-item              → CPT / taxonomy items
     - .fef-lp-wc-item           → WooCommerce product cards
     - .fef-lp-flat-item         → "flat" style items (used with fef-lp-box)
     - .fef-lp-manual-item       → manual items with img_top/left/right/bottom
   ================================================================ */

/* Force full-width row per item in list view (overrides grid cell widths
   and any box_width Elementor control set for the item card). */
.fef-lp-list > .fef-lp-item,
.fef-lp-list > .fef-lp-box,
.fef-lp-list > .fef-lp-flat-item {
    width: 100% !important;
    max-width: 100% !important;
}

/* Horizontal flex layout for the item itself. Uses !important because
   .fef-lp-wc-item and .fef-lp-flat-item hard-code flex-direction:column
   elsewhere in this file, and we need the list-view rule to win. */
.fef-lp-list .fef-lp-item,
.fef-lp-list .fef-lp-wc-item,
.fef-lp-list .fef-lp-flat-item,
.fef-lp-list .fef-lp-manual-item {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0;
}

/* Image column — fixed width, full-height cover, doesn't shrink */
.fef-lp-list .fef-lp-post-img,
.fef-lp-list .fef-lp-wc-image-wrap {
    flex: 0 0 auto;
    width: var(--fef-lp-list-img-w, 240px);
    max-width: 35%;
    height: auto;
    min-height: 180px;
    align-self: stretch;
}

.fef-lp-list .fef-lp-post-img img,
.fef-lp-list .fef-lp-wc-img,
.fef-lp-list .fef-lp-wc-image-link {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Content column — takes remaining space, stacks multiple rows */
.fef-lp-list .fef-lp-item-content,
.fef-lp-list .fef-lp-wc-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0; /* allows long titles/prices to wrap instead of overflowing */
    padding: 16px 20px;
}

/* Prevent the noimage view from double-hiding (already handled elsewhere,
   but this makes sure the list layout doesn't leave an empty image slot) */
.fef-lp-list .fef-lp-noimage .fef-lp-post-img,
.fef-lp-list .fef-lp-noimage .fef-lp-wc-image-wrap {
    display: none !important;
}

/* Mobile: fall back to vertical stacking below 768px so the row layout
   doesn't crush image + content into a strip that's too narrow to read */
@media (max-width: 767px) {
    .fef-lp-list .fef-lp-item,
    .fef-lp-list .fef-lp-wc-item,
    .fef-lp-list .fef-lp-flat-item,
    .fef-lp-list .fef-lp-manual-item {
        flex-direction: column !important;
    }
    .fef-lp-list .fef-lp-post-img,
    .fef-lp-list .fef-lp-wc-image-wrap {
        width: 100%;
        max-width: 100%;
        min-height: auto;
        height: 200px;
    }
}

/* ================================================================
   VIEW-TOGGLE — X / Y position anchors

   The toggle can now be anchored to any of the four corners of the wrap,
   with independent horizontal (X) and vertical (Y) offsets from that
   corner. The anchor is a CSS class on .fef-lp-view-toggle
   (fef-lp-vt-tl / -tr / -bl / -br), the offsets are set from the Style
   tab via responsive Elementor sliders.
   ================================================================ */

/* Anchor resets: each anchor class pins to its corner and clears the
   opposite sides so only the Elementor-emitted top/right (or bottom/left)
   values control the position. */
.fef-lp-view-toggle.fef-lp-vt-tl { top: 0; left: 0; right: auto; bottom: auto; }
.fef-lp-view-toggle.fef-lp-vt-tr { top: 0; right: 0; left: auto; bottom: auto; }
.fef-lp-view-toggle.fef-lp-vt-bl { bottom: 0; left: 0; right: auto; top: auto; }
.fef-lp-view-toggle.fef-lp-vt-br { bottom: 0; right: 0; left: auto; top: auto; }

/* ================================================================
   DYNAMIC TITLE — bar above the loop / total count

   Rendered by render_dyn_title(). The Elementor Style tab provides
   overrides for color / typography / padding / margin / bg / border
   / icon size / gap etc. — these are just sensible base styles.
   ================================================================ */
.fef-lp-dyn-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    line-height: 1.3;
    font-weight: 600;
    color: #1e293b;
    box-sizing: border-box;
}
.fef-lp-dyn-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.fef-lp-dyn-title-icon i {
    line-height: 1;
}
.fef-lp-dyn-title-text {
    display: inline-block;
}

/* ================================================================
   SORT FILTER — visitor-facing sort dropdown
   Sits alongside the view toggle by default (top-right corner),
   fully positionable via sf_anchor / sf_x / sf_y in the Style tab.
   ================================================================ */
.fef-lp-sort-filter {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Anchor position — same pattern as the view toggle */
.fef-lp-sort-filter.fef-lp-sf-tl { top: 0; left: 0; right: auto; bottom: auto; }
.fef-lp-sort-filter.fef-lp-sf-tr { top: 0; right: 90px; left: auto; bottom: auto; }
.fef-lp-sort-filter.fef-lp-sf-bl { bottom: 0; left: 0; right: auto; top: auto; }
.fef-lp-sort-filter.fef-lp-sf-br { bottom: 0; right: 90px; left: auto; top: auto; }

.fef-lp-sort-filter-label {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
}

.fef-lp-sort-filter-select {
    height: 36px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M6 8L2 4h8z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fef-lp-sort-filter-select:hover {
    border-color: #cbd5e1;
}
.fef-lp-sort-filter-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.fef-lp-sort-filter-select.is-loading {
    opacity: 0.6;
    cursor: wait;
}

/* Mobile: stack the sort filter below the view toggle so they don't collide */
@media (max-width: 767px) {
    .fef-lp-sort-filter.fef-lp-sf-tr,
    .fef-lp-sort-filter.fef-lp-sf-tl {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin-bottom: 8px;
    }
    .fef-lp-sort-filter-select {
        width: 100% !important;
    }
}

/* ================================================================
   WC CARD — enhanced styling (border, hover effects, animations)
   Companion to the "🃏 Card" style section in the Elementor UI.
   ================================================================ */

/* Baseline card transition — the transition-duration is overridden
   from the Style tab, but it needs a non-zero default here so the
   hover effects actually animate rather than snap. */
.fef-lp-wc-item {
    transition-property: transform, box-shadow, background-color, border-color, opacity;
    transition-duration: 300ms;
    transition-timing-function: ease;
    will-change: transform;
    --fef-wc-hover-amt: 6;
}

/* ── Hover animation presets, driven by wc_card_hover_effect ── */
.fef-lp-wc-hover-lift .fef-lp-wc-item:hover {
    transform: translateY(calc(var(--fef-wc-hover-amt) * -1px));
}
.fef-lp-wc-hover-sink .fef-lp-wc-item:hover {
    transform: translateY(calc(var(--fef-wc-hover-amt) * 1px));
}
.fef-lp-wc-hover-grow .fef-lp-wc-item:hover {
    transform: scale(calc(1 + var(--fef-wc-hover-amt) / 100));
}
.fef-lp-wc-hover-shrink .fef-lp-wc-item:hover {
    transform: scale(calc(1 - var(--fef-wc-hover-amt) / 100));
}
.fef-lp-wc-hover-tilt .fef-lp-wc-item:hover {
    transform: rotate(calc(var(--fef-wc-hover-amt) * 0.3deg));
}
.fef-lp-wc-hover-glow .fef-lp-wc-item:hover {
    filter: brightness(1.05) saturate(1.1);
}

/* ================================================================
   CONTENT ALIGNMENT FIX — this is the key rule that fixes the bug
   where the content area's children (title, price, category, cart
   button) always appeared clustered in the middle instead of
   respecting the Text Alignment setting.

   Root cause: .fef-lp-wc-content is a flex column, and the previous
   default was align-items: flex-start which shrinks each child to
   its own text width — so a short title like "Aloo Papad" is only
   ~90px wide even though the card is 300px, and text-align has
   nothing to work with because the flex item itself doesn't span
   the column.

   Fix: give every direct child width:100% so text-align inside them
   controls left/center/right positioning within the card. The
   Cross-Axis Alignment control still lets you fall back to the old
   "hug content" behaviour by picking Left/Center/Right instead of
   the new default "Full Width (stretch)".
   ================================================================ */
.fef-lp-wc-content > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* The title link is inline by default — force it to block so the
   title span inside it can honour the text-align setting. */
.fef-lp-wc-content > .fef-lp-item-title-link {
    display: block;
}

/* Category container likewise — links inside it stay inline
   (comma-separated), but the container itself spans full width so
   the parent's text-align controls its position. */
.fef-lp-wc-content > .fef-lp-wc-cats {
    display: block;
}

/* ================================================================
   TOP-GAP FIX — reset legacy .fef-lp-item padding on product cards

   Bug: .fef-lp-item at the top of this file carries `padding: 5px 16px`
   as a legacy default (originally intended for term-navigation items).
   Since WC cards ALSO have the .fef-lp-item class, that 5px shows as
   a strip above the image inside every card — barely noticeable in
   grid view (small cards, uniform strip blends in), very noticeable
   in list view (full-width cards, big empty band at the top of the
   whole widget).

   Fix: null out that legacy padding for the concrete product-card
   variants. Users' Elementor "Card Padding" control still wins via
   the {{WRAPPER}} scope, so any custom padding they set is preserved.
   ================================================================ */
.fef-lp-wc-item.fef-lp-item,
.fef-lp-cpt-item.fef-lp-item,
.fef-lp-manual-item.fef-lp-item,
.fef-lp-flat-item.fef-lp-item {
    padding: 0;
}

/* Belt-and-braces: also guarantee no accidental margin on the first
   card in list view, in case a theme adds default child margins. */
.fef-lp-list > .fef-lp-item:first-child,
.fef-lp-list > .fef-lp-wc-item:first-child,
.fef-lp-list > .fef-lp-box:first-child,
.fef-lp-list > .fef-lp-flat-item:first-child,
.fef-lp-list > .fef-lp-manual-item:first-child {
    margin-top: 0;
}

/* ================================================================
   CONTENT-AREA WIDTH FIX (issue: content area didn't fill card when
   the Quantity Selector was toggled off).

   Root cause: the base .fef-lp-item rule sets align-items:center on
   the flex column. .fef-lp-wc-item inherits it (same element carries
   both classes), so its column children — including the content wrap
   — only get as wide as their widest child. The Add to Cart button
   has flex:1 which stretches it to fill the content column, which in
   turn expands the content column to card width. Turn quantity off
   and the ATC button becomes the only child of the cart row → still
   fine. But turn ATC off entirely and every child is just short
   text/price → content shrinks and becomes narrower than the card.

   Fix: force align-items:stretch on the WC card so the content area
   always spans the full card width, regardless of what's inside it.
   ================================================================ */
.fef-lp-wc-item {
    align-items: stretch !important;
}

/* Same fix for CPT and manual items so they stay consistent. */
.fef-lp-cpt-item,
.fef-lp-manual-item {
    align-items: stretch;
}

/* ================================================================
   CART ROW LAYOUT — supports inline vs stacked
   ================================================================ */
/* Inline (default) — qty next to ATC button */
.fef-lp-wc-cart-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: 10px;
    /* flex-direction is set from the Cart Row Layout control via inline
       Elementor selectors (row for inline, column for stacked). */
}

/* Stacked layout — the Elementor selectors_dictionary emits
   flex-direction:column plus align-items:stretch when the Cart Row
   Layout is set to Stacked. That naturally makes the qty container
   stretch to full row width, so no extra CSS is needed here. */

/* ================================================================
   REMOVE DEFAULT FOCUS OUTLINES on interactive elements inside the
   widget. The hover/active states already provide plenty of visual
   feedback for mouse users. Keyboard users still get a visible focus
   ring via :focus-visible (browser-provided, accessibility-safe).
   ================================================================ */
.fef-lp-wrap button,
.fef-lp-wrap select,
.fef-lp-wrap input,
.fef-lp-wrap a,
.fef-lp-slider-wrap button,
.fef-lp-slider-wrap select,
.fef-lp-slider-wrap input,
.fef-lp-slider-wrap a {
    outline: none;
}
.fef-lp-wrap button:focus,
.fef-lp-wrap select:focus,
.fef-lp-wrap input:focus,
.fef-lp-wrap a:focus,
.fef-lp-slider-wrap button:focus,
.fef-lp-slider-wrap select:focus,
.fef-lp-slider-wrap input:focus,
.fef-lp-slider-wrap a:focus {
    outline: none;
    box-shadow: none;
}
/* But keep an accessible focus ring for keyboard-only users */
.fef-lp-wrap button:focus-visible,
.fef-lp-wrap select:focus-visible,
.fef-lp-wrap input:focus-visible,
.fef-lp-wrap a:focus-visible,
.fef-lp-slider-wrap button:focus-visible,
.fef-lp-slider-wrap select:focus-visible,
.fef-lp-slider-wrap input:focus-visible,
.fef-lp-slider-wrap a:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* Kill any residual outline on Firefox's inner button focus indicator */
.fef-lp-wrap button::-moz-focus-inner,
.fef-lp-slider-wrap button::-moz-focus-inner {
    border: 0;
}

/* ================================================================
   ACTION ICON CENTERING FIX

   Bug: the wishlist / compare / quick-view icons appeared offset
   inside their circular button backgrounds. Cause: some Font Awesome
   builds ship icons with inherent line-height and vertical-align
   that push them off-centre inside a flex-centred box. Explicit
   line-height:1 and vertical-align:middle on the <i> fixes it, and
   removing default button padding kills the vertical drift.
   ================================================================ */
.fef-lp-wc-action {
    padding: 0 !important;
    line-height: 1;
    font-size: 0;                /* prevents the <button> from adding a text baseline */
}
.fef-lp-wc-action i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    font-size: 14px;             /* overridden by the wc*_icon_size responsive control */
    width: auto;
    height: auto;
}
.fef-lp-wc-action svg {
    display: block;
    vertical-align: middle;
}

/* ================================================================
   CARD LAYOUT TEMPLATES

   These map 1:1 to the "Card Layout Template" content control. Each
   template swaps flex direction / order / positioning of the image
   wrap and the content wrap inside .fef-lp-wc-item.
   ================================================================ */

/* Image Top (default) — nothing to override, base already stacks
   image-wrap then content-wrap top-to-bottom. */
.fef-lp-wc-layout-img_top .fef-lp-wc-item {
    flex-direction: column;
}

/* Image Bottom — reverse the column so content sits above the image. */
.fef-lp-wc-layout-img_bottom.fef-lp-wc-item {
    flex-direction: column-reverse;
}

/* Image Left — image column on left, content column stretches right. */
.fef-lp-wc-layout-img_left.fef-lp-wc-item {
    flex-direction: row;
    align-items: stretch;
}
.fef-lp-wc-layout-img_left .fef-lp-wc-image-wrap {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
    height: auto;
    min-height: 180px;
    align-self: stretch;
}
.fef-lp-wc-layout-img_left .fef-lp-wc-image-wrap .fef-lp-wc-image-link,
.fef-lp-wc-layout-img_left .fef-lp-wc-image-wrap .fef-lp-wc-img {
    height: 100%;
    object-fit: cover;
}
.fef-lp-wc-layout-img_left .fef-lp-wc-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Image Right — same as left but reversed. */
.fef-lp-wc-layout-img_right.fef-lp-wc-item {
    flex-direction: row-reverse;
    align-items: stretch;
}
.fef-lp-wc-layout-img_right .fef-lp-wc-image-wrap {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
    height: auto;
    min-height: 180px;
    align-self: stretch;
}
.fef-lp-wc-layout-img_right .fef-lp-wc-image-wrap .fef-lp-wc-image-link,
.fef-lp-wc-layout-img_right .fef-lp-wc-image-wrap .fef-lp-wc-img {
    height: 100%;
    object-fit: cover;
}
.fef-lp-wc-layout-img_right .fef-lp-wc-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Overlay — content sits on top of image with a semi-transparent bg. */
.fef-lp-wc-layout-overlay.fef-lp-wc-item {
    position: relative;
    display: block;
}
.fef-lp-wc-layout-overlay .fef-lp-wc-image-wrap {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.fef-lp-wc-layout-overlay .fef-lp-wc-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 20px;
    z-index: 2;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.fef-lp-wc-layout-overlay .fef-lp-wc-content * {
    color: inherit;
}

/* ================================================================
   IMAGE HOVER EFFECTS
   ================================================================ */
.fef-lp-wc-image-wrap .fef-lp-wc-img {
    transition: transform 0.4s ease, filter 0.4s ease, opacity 0.3s ease;
    transform-origin: center center;
}

/* Zoom in (default) */
.fef-lp-wc-imghover-zoom .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    transform: scale(1.08);
}
/* Zoom out — start bigger, shrink on hover */
.fef-lp-wc-imghover-zoom_out .fef-lp-wc-image-wrap .fef-lp-wc-img {
    transform: scale(1.08);
}
.fef-lp-wc-imghover-zoom_out .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    transform: scale(1);
}
/* Fade */
.fef-lp-wc-imghover-fade .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    opacity: 0.75;
}
/* Blur */
.fef-lp-wc-imghover-blur .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    filter: blur(2px);
}
/* Grayscale */
.fef-lp-wc-imghover-grayscale .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    filter: grayscale(0.9);
}
/* Sepia */
.fef-lp-wc-imghover-sepia .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    filter: sepia(0.7);
}
/* Slide up */
.fef-lp-wc-imghover-slide_up .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    transform: translateY(-8px);
}
/* Slight rotate */
.fef-lp-wc-imghover-rotate .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    transform: rotate(2deg) scale(1.05);
}
/* Explicit none */
.fef-lp-wc-imghover-none .fef-lp-wc-image-wrap:hover .fef-lp-wc-img {
    transform: none;
    filter: none;
    opacity: 1;
}

/* ================================================================
   TITLE HOVER EFFECTS
   ================================================================ */
.fef-lp-wc-item .fef-lp-item-title,
.fef-lp-wc-item .fef-lp-item-title-link {
    transition: color 0.2s ease, transform 0.2s ease, text-decoration-color 0.2s ease;
    display: inline-block;
}
/* Color change: color is set by wc_title_hover_color, transition is here */
.fef-lp-wc-titlehover-underline .fef-lp-wc-item:hover .fef-lp-item-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fef-lp-wc-titlehover-slide_right .fef-lp-wc-item:hover .fef-lp-item-title {
    transform: translateX(4px);
}
.fef-lp-wc-titlehover-grow .fef-lp-wc-item:hover .fef-lp-item-title {
    transform: scale(1.03);
    transform-origin: left center;
}

/* ================================================================
   FLY-TO-CART ANIMATION SUPPORT

   The visual (a cloned <img> flying from card to cart) is created
   at runtime by JS. Base styles for that clone go here so it renders
   correctly regardless of theme.
   ================================================================ */
.fef-flytocart-clone {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform var(--fly-duration, 800ms) cubic-bezier(0.55, -0.2, 0.65, 1.3),
                opacity var(--fly-duration, 800ms) ease-out;
    will-change: transform, opacity;
}

/* Cart target — brief pulse when the item lands on it */
.fef-cart-pulse {
    animation: fef-cart-pulse-anim 0.5s ease-out;
}
@keyframes fef-cart-pulse-anim {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ================================================================
   VARIABLE PRODUCTS — inline variation dropdowns
   Rendered by render_wc_inline_variations() when the "Variable
   Product Action" setting is "Show inline attribute dropdowns".
   ================================================================ */
.fef-lp-wc-var-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.fef-lp-wc-var-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* NOTE: width:100% was removed here — it forced the selects block
       to take the full row, which pushed the cart-row onto a new line
       even when the parent .fef-lp-wc-var-body was flex-direction:row.
       The parent now controls sizing via its own flex layout. */
}
.fef-lp-wc-var-select {
    flex: 1 1 auto;
    min-width: 90px;
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M6 8L2 4h8z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fef-lp-wc-var-select:hover  { border-color: #94a3b8; }
.fef-lp-wc-var-select:focus  { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

/* Disabled state on the Add to Cart button (before a valid variation
   is selected) — keep it clickable-looking but visually inactive. */
.fef-lp-wc-atc-variable:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.fef-lp-wc-atc-variable:not(:disabled) {
    opacity: 1;
}

/* ================================================================
   VIEW PRODUCT link — for variable products with "View Product" mode
   ================================================================ */
.fef-lp-wc-view-product {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.fef-lp-wc-view-product:hover {
    text-decoration: none;
}

/* ================================================================
   VARIABLE PRODUCTS — layout tweaks + live price + inline mode
   ================================================================ */

/* Live price element (variation-specific) takes precedence — hide
   the generic product price row inside the same content column
   so we don't show two prices at once (product's range + specific
   variation's price). */

/* ── Variation price element ──
   Lives in the same visual location as the simple-product .fef-lp-wc-price
   (right below title/description). Shares the wc_price_* Style tab
   controls since it also carries .fef-lp-wc-price as a marker. */
.fef-lp-wc-var-price ins {
    text-decoration: none;
    background: transparent;
    color: inherit;
}
.fef-lp-wc-var-price del {
    color: #94a3b8;
    margin-right: 6px;
    font-weight: 500;
    font-size: 0.9em;
}

/* ── Variation body — the container that Layout toggles ──
   Elementor's selectors_dictionary sets flex-direction (column for
   Stacked, row for Inline) directly on .fef-lp-wc-var-body — see the
   wc_var_layout control. These base rules just handle child sizing so
   the row lays out cleanly in either mode. */
.fef-lp-wc-var-body {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.fef-lp-wc-var-body .fef-lp-wc-var-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.fef-lp-wc-var-body .fef-lp-wc-cart-row {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* When Inline layout applies (server emits .fef-lp-wc-var-body--inline
   class based on the desktop wc_var_layout setting, AND Elementor's
   selectors_dictionary sets flex-direction:row on the body for the
   active breakpoint), tune child sizing so the button and dropdowns
   don't collide. Class-based (not [style*=...]) because Elementor emits
   CSS rules, not inline styles — the attribute-selector version never
   matched anything. */
.fef-lp-wc-var-body--inline .fef-lp-wc-var-select {
    min-width: 80px;
    max-width: 160px;
    flex: 0 1 auto;
}
.fef-lp-wc-var-body--inline .fef-lp-wc-atc-variable {
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
    min-width: 0;   /* override the base .fef-lp-wc-atc min-width:140px so it doesn't force wrap */
}
.fef-lp-wc-var-body--inline .fef-lp-wc-var-selects {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}
.fef-lp-wc-var-body--inline .fef-lp-wc-cart-row {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}
/* Mobile — inline mode is impractical below ~767px (typical mobile
   breakpoint), so fall back to stacked (up/down) layout automatically.
   Same applies to the cart-row (qty + add-to-cart): if the user has
   the cart row inline on desktop, mobile flips it to stacked so the
   button doesn't get squashed next to the qty stepper. */
@media (max-width: 767px) {
    /* ═══ WC VAR BODY — universal mobile enforcement ═══
       Regardless of the desktop wc_var_layout class emitted by PHP
       (which reads only the desktop setting), force the ENTIRE var-body
       to stack vertically on mobile and give both children full width.
       Previously, if the shop owner set desktop=inline AND mobile=stacked,
       the DESKTOP class 'fef-lp-wc-var-body--inline' still applied on
       mobile, its child rules kept the dropdown at max-width:160px, and
       the Add to Cart button was pushed into a tiny sliver on the right.
       The fix: target .fef-lp-wc-var-body directly (no class dependency)
       and force column stacking + 100% width children on every mobile card. */
    .fef-lp-wc-var-body,
    .fef-lp-wc-var-body--inline,
    .fef-lp-wc-var-body--stacked {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    /* Both children must fill the card width */
    .fef-lp-wc-var-body > .fef-lp-wc-var-selects,
    .fef-lp-wc-var-body > .fef-lp-wc-cart-row {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    /* Individual attribute dropdowns — full width, no 160px cap that
       the desktop inline class would otherwise impose */
    .fef-lp-wc-var-body .fef-lp-wc-var-select,
    .fef-lp-wc-var-body .fef-lp-wc-var-selects .fef-lp-wc-var-select {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    /* Selects wrapper also full width, no nowrap flex constraint */
    .fef-lp-wc-var-body .fef-lp-wc-var-selects {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    /* Cart row itself (qty + button) — force column stack on mobile
       regardless of desktop layout so touch targets stay comfortable. */
    .fef-lp-wc-cart-row {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .fef-lp-wc-cart-row .fef-lp-wc-qty {
        width: 100%;
        justify-content: center;
    }
    /* Ensure the Add to Cart button gets full width in the column
       layout, even if the desktop alignment control set it to a
       shrunk width (e.g. left/center/right which sets flex:0 0 auto). */
    .fef-lp-wc-cart-row .fef-lp-wc-atc {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
}

/* ================================================================
   BUTTON PLACEMENT — left / center / right / full-width
   Driven by the "Button Placement" control in the Style tab. Uses CSS
   custom properties (set via selectors_dictionary) so tablet/mobile
   overrides work at the parent scope and children read them via var().

   Applies to every cart-row uniformly: simple products, variable
   products (add-to-cart mode), inline-variations mode, view-product
   mode. Class-based fallbacks (.fef-lp-wc-atc-align--*) provide the
   initial desktop layout in case Elementor's inline styles arrive late.
   ================================================================ */
.fef-lp-wc-cart-row {
    justify-content: var(--fef-atc-align, stretch);
}
.fef-lp-wc-cart-row .fef-lp-wc-atc {
    flex: var(--fef-atc-flex, 1 1 auto);
    min-width: 0;   /* let the alignment vars fully control sizing */
}
/* Class-based fallbacks — server emits these based on desktop setting */
.fef-lp-wc-atc-align--left   { --fef-atc-align: flex-start;  --fef-atc-flex: 0 0 auto; }
.fef-lp-wc-atc-align--center { --fef-atc-align: center;      --fef-atc-flex: 0 0 auto; }
.fef-lp-wc-atc-align--right  { --fef-atc-align: flex-end;    --fef-atc-flex: 0 0 auto; }
.fef-lp-wc-atc-align--full   { --fef-atc-align: stretch;     --fef-atc-flex: 1 1 auto; }

/* ================================================================
   PAGINATION VISIBILITY
   Some themes hide .fef-lp-pagination by default via
   `.page-numbers { display:none }` or `.pagination` reset styles.
   Force visibility with defensive overrides so pagination always shows.
   ================================================================ */
.fef-lp-pagination {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    padding: 10px 0;
    width: 100%;
    clear: both;
}
.fef-lp-pagination .fef-lp-pg,
.fef-lp-pagination a.fef-lp-pg,
.fef-lp-pagination span.fef-lp-pg {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ================================================================
   GRID MOBILE FIRST-ITEM BLANK FIX
   Previously we forced display:flex on mobile which killed the user's
   Mobile Columns setting. Fixed: keep CSS grid intact, respect the
   --lp-cols responsive variable, and just neutralize the pseudo-
   elements / grid-column-start quirks that some themes inject.

   How mobile columns work:
   • Elementor's responsive Columns control writes --lp-cols per
     breakpoint (desktop=3, tablet=2, mobile=1 or whatever the user
     picked). CSS grid reads this variable, so nothing here needs to
     override it.
   ================================================================ */
.fef-lp-grid {
    /* grid-auto-flow:dense fills gaps left by items that span wider,
       preventing empty cells before the first real item. */
    grid-auto-flow: row dense;
}
.fef-lp-grid::before,
.fef-lp-grid::after {
    /* Some themes inject decorative pseudo-elements that grid treats as
       first grid children — hide them. */
    display: none !important;
    content: none !important;
}
.fef-lp-grid > .fef-lp-box:first-child,
.fef-lp-grid > .fef-lp-wc-item:first-child,
.fef-lp-grid > .fef-lp-cpt-item:first-child,
.fef-lp-grid > .fef-lp-manual-item:first-child {
    /* Explicit start-column-1 so the first item never gets shoved to
       column 2 by grid-auto-placement quirks. */
    grid-column-start: 1;
}
/* NOTE: no @media override on .fef-lp-grid — the parent grid keeps
   working from --lp-cols at every breakpoint. */

/* ================================================================
   LAST CUSTOM CARD (slider)
   Appended as the final slide when Content → Slider → Last Custom Card
   is enabled. Renders as a distinct visual — the whole tile is a link
   when Card Link is set.
   ================================================================ */
.fef-lp-last-card {
    display: flex;
    flex-direction: column;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 0 0 auto;   /* slider slide sizing */
    scroll-snap-align: start;
    box-sizing: border-box;
}
.fef-lp-last-card:hover {
    transform: translateY(-3px);
}
.fef-lp-last-card-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 140px;
    width: 100%;
}
.fef-lp-last-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.fef-lp-last-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}
.fef-lp-last-card-desc {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.fef-lp-last-card-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #2563eb;
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
    margin-top: 6px;
}
.fef-lp-last-card:hover .fef-lp-last-card-btn {
    background: #1d4ed8;
}

/* ================================================================
   BACKGROUND CARD OVERLAY (any post/product mode)
   When "Enable Background Image Mode" is on, each card renders as a
   full-bleed image with a bottom-anchored text overlay. Three coverage
   modes: full (100%), half (50%), quarter (25%).
   ================================================================ */
.fef-lp-bg-card {
    position: relative;
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none !important;
    color: #ffffff;
    box-sizing: border-box;
}
.fef-lp-bg-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    transition: background-color 0.2s ease;
}
/* Coverage modes */
.fef-lp-bg-card[data-overlay-mode="full"] .fef-lp-bg-card-overlay {
    top: 0; /* covers entire card */
    justify-content: center;
    text-align: center;
}
.fef-lp-bg-card[data-overlay-mode="half"] .fef-lp-bg-card-overlay {
    height: 50%; /* bottom half */
}
.fef-lp-bg-card[data-overlay-mode="quarter"] .fef-lp-bg-card-overlay {
    height: 25%; /* bottom quarter */
}
.fef-lp-bg-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}
.fef-lp-bg-card-excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    opacity: 0.9;
}
.fef-lp-bg-card:hover .fef-lp-bg-card-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Mobile — reduce overlay heights + font sizes so bg-cards stay readable */
@media (max-width: 480px) {
    .fef-lp-bg-card-title { font-size: 16px; }
    .fef-lp-bg-card-excerpt { font-size: 12px; }
}

/* ================================================================
   MOBILE — Add to Cart button guaranteed visible
   
   Root cause of the "missing add-to-cart on mobile" bug: WC item cards
   have `overflow:hidden` (needed for image zoom effects inside). On
   mobile:
     • Variable products need extra vertical space for attribute
       dropdowns + qty + button
     • If any parent CSS (Style tab Box height, grid row min-height,
       flex align:stretch quirks) constrains the card height, the
       cart-row at the bottom gets clipped BELOW the visible area
     • Simple products fit fine because they have less content
   
   Fix: on mobile, defensively override overflow + height constraints
   on the card AND guarantee cart-row/button element visibility.
   ================================================================ */
@media (max-width: 767px) {
    .fef-lp-wc-item,
    .fef-lp-cpt-item,
    .fef-lp-manual-item,
    .fef-lp-flat-item,
    .fef-lp-box {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    /* Content container inside the card — also must not clip vertically */
    .fef-lp-wc-content,
    .fef-lp-wc-item .fef-lp-wc-content {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Guaranteed-visible add-to-cart button + wrapper elements.
       These !important rules override any Style tab customization that
       might accidentally have set display:none, visibility:hidden, or
       opacity:0 (e.g. via the Responsive Visibility section). If the
       shop owner deliberately hid these via Responsive Visibility, the
       widget-specific class-based rules further below will override. */
    .fef-lp-wc-item .fef-lp-wc-cart-row,
    .fef-lp-wc-item .fef-lp-wc-var-body,
    .fef-lp-wc-item .fef-lp-wc-var-wrap,
    .fef-lp-wc-item .fef-lp-wc-var-selects,
    .fef-lp-wc-item .fef-lp-wc-atc {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static;
    }
    /* Button-specific — ensure it fills available width and its content
       doesn't overflow horizontally either. */
    .fef-lp-wc-item .fef-lp-wc-atc {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal;
        box-sizing: border-box;
    }
    /* The cart-row itself is a flex container — align-items stretch so
       both the (optional) qty stepper AND the button are visible +
       usable at full width. */
    .fef-lp-wc-item .fef-lp-wc-cart-row {
        align-items: stretch !important;
    }
    /* Variable product-specific — attribute selectors must be visible +
       usable on mobile even when the parent uses inline layout. */
    .fef-lp-wc-item .fef-lp-wc-var-select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px;
    }
}