/**
 * BeezWoo Category Showcase - v3.0.0 ENTERPRISE GRADE
 * 
 * FEATURES:
 * - 10 Aspect Ratios with responsive override per breakpoint
 * - Full Carousel controls (6 effects, peek, autoplay, arrows styles)
 * - Premium Animations (entrance, hover, image effects)
 * - CSS Variables for complete customization
 * 
 * @package BeezWoo
 */

.elementor-widget-beezwoo_category_showcase {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   CSS VARIABLES - ENTERPRISE GRADE COMPLETE RESPONSIVE SYSTEM
   ========================================================================== */
.beezwoo-cs {
    /* CRITICAL: Proper positioning to prevent overlap */
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%;
    box-sizing: border-box;

    /* Grid Desktop */
    --cs-grid-cols: 4;
    --cs-grid-gap: 20px;
    --cs-grid-min-h: 250px;
    --cs-grid-max-h: 500px;
    
    /* Masonry Desktop */
    --cs-masonry-cols: 4;
    --cs-masonry-gap: 20px;
    --cs-masonry-min-h: 200px;
    
    /* Bento Desktop */
    --cs-bento-h: 600px;
    --cs-bento-gap: 15px;
    
    /* Magazine Desktop */
    --cs-mag-row-h: 400px;
    --cs-mag-big-w: 60%;
    --cs-mag-gap: 20px;
    
    /* Carousel Desktop */
    --cs-carousel-h: 400px;
    --cs-carousel-gap: 20px;
    
    /* Tablet - Grid */
    --cs-tablet-cols: 2;
    --cs-tablet-gap: 15px;
    --cs-tablet-card-min-h: 200px;
    --cs-tablet-card-max-h: 350px;
    
    /* Tablet - Carousel */
    --cs-tablet-carousel-h: 350px;
    --cs-tablet-carousel-space: 15px;
    
    /* Tablet - Bento */
    --cs-tablet-bento-h: 500px;
    --cs-tablet-bento-card-h: 220px;
    --cs-tablet-bento-first-h: 300px;
    
    /* Tablet - Magazine */
    --cs-tablet-mag-row-h: 350px;
    --cs-tablet-mag-big-h: 280px;
    --cs-tablet-mag-small-h: 200px;
    
    /* Tablet - Masonry */
    --cs-tablet-masonry-cols: 3;
    
    /* Mobile - Grid */
    --cs-mobile-cols: 2;
    --cs-mobile-gap: 10px;
    --cs-mobile-card-min-h: 150px;
    --cs-mobile-card-max-h: 280px;
    
    /* Mobile - Special (Stories/Tinder/Fullscreen) */
    --cs-mobile-h: 85vh;
    
    /* Mobile - Carousel */
    --cs-mobile-carousel-h: 280px;
    --cs-mobile-carousel-space: 10px;
    
    /* Mobile - Bento */
    --cs-mobile-bento-card-h: 200px;
    --cs-mobile-bento-first-h: 280px;
    
    /* Mobile - Magazine */
    --cs-mobile-mag-big-h: 280px;
    --cs-mobile-mag-small-h: 180px;
    
    /* Mobile - Masonry */
    --cs-mobile-masonry-cols: 2;
    
    /* Style */
    --cs-radius: 12px;
    --cs-overlay-color: #000000;
    --cs-overlay-opacity: 0.5;
    --cs-card-bg: var(--cs-overlay-color);
    --cs-btn-color: #333333;
    --cs-btn-bg: #ffffff;
    --cs-btn-radius: 6px;
    --cs-arrows-color: #ffffff;
    --cs-arrows-bg: rgba(0,0,0,0.5);
    /* Title positioning & layout (driven by Elementor responsive controls) */
    --cs-title-inset: 12px; /* distance from top/bottom edges */
    --cs-title-inline-gap: 16px; /* distance from left/right edges */
    --cs-title-align-x: flex-start;
    --cs-title-align-y: flex-end;
    --cs-title-text-align: left;
    --cs-title-gap: 8px;
    --cs-title-align-self: auto; /* 'stretch' for full-width bar */
    --cs-title-offset-top: var(--cs-title-inset);
    --cs-title-offset-bottom: var(--cs-title-inset);
    --cs-title-offset-left: var(--cs-title-inline-gap);
    --cs-title-offset-right: var(--cs-title-inline-gap);
    --cs-content-pad-top: var(--cs-title-offset-top);
    --cs-content-pad-right: var(--cs-title-offset-right);
    --cs-content-pad-bottom: var(--cs-title-offset-bottom);
    --cs-content-pad-left: var(--cs-title-offset-left);

    /* Title background (pill / full-side / none) */
    --cs-title-bg-on: 0;
    --cs-title-bg-color: rgba(0,0,0,0.55);
    --cs-title-bg-radius: 10px;
    --cs-title-bg-blur: 0px;
    --cs-title-pad: 0;

    /* Full-side sizing (horizontal bar / vertical strip) */
    --cs-title-inline-size: auto;
    --cs-title-block-size: auto;
    --cs-title-strip-w: clamp(120px, 22vw, 180px);
    --cs-title-v-inline-size: auto;
    --cs-title-v-block-size: auto;
    --cs-title-v-align-self: auto;
    
    /* Animation */
    --cs-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.beezwoo-cs-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-style: italic;
}

/* ==========================================================================
   CARD BASE
   ========================================================================== */
.beezwoo-cs__card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--cs-radius, 12px);
    text-decoration: none;
    background: var(--cs-card-bg, transparent);
    cursor: pointer;
}

.beezwoo-cs__card:hover,
.beezwoo-cs__card:focus {
    text-decoration: none;
}

/* ==========================================================================
   MEDIA CONTAINER
   ========================================================================== */
.beezwoo-cs__media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: inherit;
    background: var(--cs-card-bg, transparent);
}

.beezwoo-cs__image {
    display: block;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform var(--cs-transition), filter var(--cs-transition);
    border-radius: inherit;
}

/* ==========================================================================
   VIDEO
   ========================================================================== */
.beezwoo-cs__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: inherit;
}

.beezwoo-cs__video.is-playing {
    opacity: 1;
}

/* Hide placeholder image when video is playing to prevent sub-pixel bleed */
.beezwoo-cs__media:has(.beezwoo-cs__video.is-playing) > .beezwoo-cs__image {
    visibility: hidden;
}

.beezwoo-cs__video video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    pointer-events: none;
    border-radius: inherit;
}

/* ==========================================================================
   VIDEO CARD HOVER EFFECTS - ENTERPRISE GRADE
   GPU-accelerated, performant, cache-friendly
   ========================================================================== */

/* Video inherits transitions for consistency - GPU optimized */
.beezwoo-cs__video,
.beezwoo-cs__video video {
    transition: transform var(--cs-transition), filter var(--cs-transition), opacity 0.5s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Slight overscale to eliminate sub-pixel black edges around video */
.beezwoo-cs__video video {
    transform: scale(1.03);
}

/* ZOOM - Apply to both image and video */
.beezwoo-cs--hover-zoom .beezwoo-cs__card:hover .beezwoo-cs__video video {
    transform: scale(1.08);
}

/* BLUR - Video also blurs on hover */
.beezwoo-cs--hover-blur .beezwoo-cs__card:hover .beezwoo-cs__video video {
    filter: blur(4px);
}

/* TILT 3D - Video container follows card transform */
.beezwoo-cs--hover-tilt .beezwoo-cs__video {
    transform-style: preserve-3d;
}

/* GLOW - Video card glow */
.beezwoo-cs--hover-glow .beezwoo-cs__card--has-video:hover {
    box-shadow: 0 0 30px var(--cs-glow-color, rgba(255,255,255,0.4)),
                0 0 60px var(--cs-glow-color, rgba(255,255,255,0.2)),
                0 8px 32px rgba(0,0,0,0.3);
}

/* NEON - Video card neon glow */
.beezwoo-cs--hover-neon .beezwoo-cs__card--has-video:hover {
    box-shadow:
        0 0 5px var(--neon-color, #00f5ff),
        0 0 10px var(--neon-color, #00f5ff),
        0 0 20px var(--neon-color, #00f5ff),
        0 0 40px var(--neon-color, #00f5ff);
}

/* PARALLAX - Video moves with parallax effect */
.beezwoo-cs--hover-parallax .beezwoo-cs__video {
    transition: transform var(--cs-transition);
}
.beezwoo-cs--hover-parallax .beezwoo-cs__card:hover .beezwoo-cs__video {
    transform: scale(1.1) translateZ(-20px);
}

/* LIFT - Video card lifts */
.beezwoo-cs--hover-lift .beezwoo-cs__card--has-video:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* SHINE - Shine effect works over video */
.beezwoo-cs--hover-shine .beezwoo-cs__card--has-video::after {
    z-index: 15; /* Above video z-index:2 */
}

/* GLITCH - Video glitches on hover */
.beezwoo-cs--hover-glitch .beezwoo-cs__card:hover .beezwoo-cs__video video {
    animation: glitchEffect 0.3s infinite;
}

/* Ken Burns on video */
.beezwoo-cs--image-ken-burns .beezwoo-cs__video video {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

/* Card with video: ensure hover effects work when video is playing */
.beezwoo-cs__card--has-video .beezwoo-cs__video.is-playing {
    pointer-events: none; /* Allow hover through to card */
}

/* Video card overlay interaction */
.beezwoo-cs__card--has-video:hover .beezwoo-cs__overlay {
    transition: opacity var(--cs-transition);
}

/* MORPH - Border effect on video cards */
.beezwoo-cs--hover-morph .beezwoo-cs__card--has-video::before {
    z-index: 3; /* Above video */
}

/* REVEAL - Content reveals on video cards */
.beezwoo-cs--hover-reveal .beezwoo-cs__card--has-video .beezwoo-cs__content {
    z-index: 15; /* Above video */
}

/* Performance: reduce motion for video cards on mobile */
@media (max-width: 767px) {
    .beezwoo-cs__video,
    .beezwoo-cs__video video {
        will-change: auto; /* Reduce GPU memory on mobile */
    }

    /* Simpler hover effects on mobile for video cards - touch friendly */
    .beezwoo-cs--hover-zoom .beezwoo-cs__card:hover .beezwoo-cs__video video,
    .beezwoo-cs--hover-parallax .beezwoo-cs__card:hover .beezwoo-cs__video {
        transform: none;
    }
}

/* Reduced motion preference - accessibility */
@media (prefers-reduced-motion: reduce) {
    .beezwoo-cs__video,
    .beezwoo-cs__video video {
        transition: opacity 0.3s ease !important;
        animation: none !important;
    }
}

/* ==========================================================================
   PREMIUM SLIDE BACKGROUND
   LiteSpeed-friendly: CSS class toggles, CSS variables, no inline JS styles.
   GPU-accelerated: transform + opacity transitions on compositor layer.
   ========================================================================== */
.beezwoo-cs__slides {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
}

.beezwoo-cs__slides__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--cs-slide-transition, 1000ms) cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.beezwoo-cs__slides__slide.is-active {
    opacity: 1;
}

.beezwoo-cs__slides__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cs-slide-position, center center);
}

/* Hide static image when slides are active */
.beezwoo-cs__media:has(.beezwoo-cs__slides) > .beezwoo-cs__image {
    visibility: hidden;
}

/* ==========================================================================
   Effects: Ken Burns — PREMIUM CINEMATIC v2.0
   Continuous animation on ALL slides (not just active).
   Opacity crossfade is independent — viewer sees smooth crossfade between
   two images that are BOTH already slowly panning/zooming.
   4 alternating directions for visual variety.
   ========================================================================== */
.beezwoo-cs__slides--ken-burns .beezwoo-cs__slides__slide img {
    will-change: transform;
    animation-duration: 25s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}

/* Direction variety — each slide pans/zooms a different way */
.beezwoo-cs__slides--ken-burns .beezwoo-cs__slides__slide:nth-child(4n+1) img {
    animation-name: cs-kb-drift-tl;
}
.beezwoo-cs__slides--ken-burns .beezwoo-cs__slides__slide:nth-child(4n+2) img {
    animation-name: cs-kb-drift-br;
    animation-delay: -6s; /* offset so slides are at different points in the cycle */
}
.beezwoo-cs__slides--ken-burns .beezwoo-cs__slides__slide:nth-child(4n+3) img {
    animation-name: cs-kb-drift-tr;
    animation-delay: -12s;
}
.beezwoo-cs__slides--ken-burns .beezwoo-cs__slides__slide:nth-child(4n) img {
    animation-name: cs-kb-drift-center;
    animation-delay: -18s;
}

/* Drift top-left: slow zoom in toward top-left */
@keyframes cs-kb-drift-tl {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.18) translate(-2.5%, -1.8%); }
}

/* Drift bottom-right: slow zoom in toward bottom-right */
@keyframes cs-kb-drift-br {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(2%, 1.5%); }
}

/* Drift top-right: slow pan right with gentle zoom */
@keyframes cs-kb-drift-tr {
    0%   { transform: scale(1.12) translate(-1.5%, 0.5%); }
    100% { transform: scale(1) translate(1.5%, -1.2%); }
}

/* Drift center: gentle breathing zoom (no pan) */
@keyframes cs-kb-drift-center {
    0%   { transform: scale(1); }
    100% { transform: scale(1.14); }
}

/* Effects: Zoom in on enter */
.beezwoo-cs__slides--zoom .beezwoo-cs__slides__slide.is-active img {
    animation: cs-slide-zoom var(--cs-slide-transition, 1000ms) ease-out forwards;
}

@keyframes cs-slide-zoom {
    from { transform: scale(1.1); }
    to   { transform: scale(1); }
}

/* Effects: Slide from right */
.beezwoo-cs__slides--slide .beezwoo-cs__slides__slide {
    transform: translateX(100%);
    transition: opacity var(--cs-slide-transition, 1000ms) ease,
                transform var(--cs-slide-transition, 1000ms) ease;
}

.beezwoo-cs__slides--slide .beezwoo-cs__slides__slide.is-active {
    transform: translateX(0);
}

/* Filters */
.beezwoo-cs__slides--filter-luxury img   { filter: sepia(0.15) contrast(1.1) saturate(0.9); }
.beezwoo-cs__slides--filter-bw img       { filter: grayscale(1) contrast(1.1); }
.beezwoo-cs__slides--filter-contrast img  { filter: contrast(1.3) saturate(1.1); }
.beezwoo-cs__slides--filter-moody img     { filter: brightness(0.8) contrast(1.1) saturate(0.9); }
.beezwoo-cs__slides--filter-vintage img   { filter: sepia(0.3) contrast(1.1) saturate(0.8); }

/* Hover: zoom applies to active slide */
.beezwoo-cs--hover-zoom .beezwoo-cs__card:hover .beezwoo-cs__slides__slide.is-active img {
    transform: scale(var(--cs-hover-scale, 1.08));
    transition: transform var(--cs-transition);
}

/* Hover: blur applies to slides */
.beezwoo-cs--hover-blur .beezwoo-cs__card:hover .beezwoo-cs__slides__slide img {
    filter: blur(4px);
}

/* Reduced motion for slides */
@media (prefers-reduced-motion: reduce) {
    .beezwoo-cs__slides__slide {
        transition-duration: 0.3s !important;
    }
    .beezwoo-cs__slides__slide img {
        animation: none !important;
    }
}

/* ==========================================================================
   OVERLAY
   ========================================================================== */
.beezwoo-cs__overlay {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    pointer-events: none;
    z-index: 5;
    transition: opacity var(--cs-transition);
    border-radius: inherit;
}

.beezwoo-cs--overlay-none .beezwoo-cs__overlay {
    display: none;
}

.beezwoo-cs--overlay-solid .beezwoo-cs__overlay {
    background: var(--cs-overlay-color);
    opacity: var(--cs-overlay-opacity);
}

.beezwoo-cs--overlay-gradient .beezwoo-cs__overlay {
    background: linear-gradient(to top, var(--cs-overlay-color) 0%, transparent 60%);
    opacity: calc(var(--cs-overlay-opacity) + 0.3);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */
.beezwoo-cs__content {
    position: absolute;
    z-index: 10;
    inset: 0;
    padding: var(--cs-content-pad-top, var(--cs-title-offset-top, var(--cs-title-inset, 20px)))
             var(--cs-content-pad-right, var(--cs-title-offset-right, var(--cs-title-inline-gap, 16px)))
             var(--cs-content-pad-bottom, var(--cs-title-offset-bottom, var(--cs-title-inset, 20px)))
             var(--cs-content-pad-left, var(--cs-title-offset-left, var(--cs-title-inline-gap, 16px)));
    display: flex;
    flex-direction: column;
    gap: var(--cs-title-gap, 8px);
    align-items: var(--cs-title-align-x, flex-start);
    justify-content: var(--cs-title-align-y, flex-end);
    text-align: var(--cs-title-text-align, left);
    max-width: 100%;
    transition: transform var(--cs-transition), opacity var(--cs-transition);
    pointer-events: none;
}

/* Make inner elements clickable inside the full-card overlay */
.beezwoo-cs__content > * {
    pointer-events: auto;
}

/* Default align presets (can be overridden by Elementor responsive controls) */
.beezwoo-cs--content-top-left { --cs-title-align-y: flex-start; --cs-title-align-x: flex-start; --cs-title-text-align: left; }
.beezwoo-cs--content-top-center { --cs-title-align-y: flex-start; --cs-title-align-x: center; --cs-title-text-align: center; }
.beezwoo-cs--content-center { --cs-title-align-y: center; --cs-title-align-x: center; --cs-title-text-align: center; }
.beezwoo-cs--content-bottom-left { --cs-title-align-y: flex-end; --cs-title-align-x: flex-start; --cs-title-text-align: left; }
.beezwoo-cs--content-bottom-center { --cs-title-align-y: flex-end; --cs-title-align-x: center; --cs-title-text-align: center; }

/* Vertical title presets */
.beezwoo-cs--title-vertical-left { --cs-title-align-x: flex-start; --cs-title-text-align: left; }
.beezwoo-cs--title-vertical-right { --cs-title-align-x: flex-end; --cs-title-text-align: right; }

.beezwoo-cs__title {
    position: relative;
    isolation: isolate;
    display: block;
    margin: 0;
    padding: var(--cs-title-pad);
    width: var(--cs-title-inline-size, auto);
    height: var(--cs-title-block-size, auto);
    max-width: 100%;
    align-self: var(--cs-title-align-self, auto);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;

    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    white-space: normal;
}

.beezwoo-cs__title::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--cs-title-bg-radius, 10px);
    background: var(--cs-title-bg-color, rgba(0,0,0,0.55));
    opacity: var(--cs-title-bg-on, 0);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    z-index: -1;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .beezwoo-cs__title::before {
        -webkit-backdrop-filter: blur(var(--cs-title-bg-blur, 0px));
        backdrop-filter: blur(var(--cs-title-bg-blur, 0px));
    }
}

.beezwoo-cs--title-vertical-left .beezwoo-cs__title,
.beezwoo-cs--title-vertical-right .beezwoo-cs__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
    width: var(--cs-title-v-inline-size, auto);
    height: var(--cs-title-v-block-size, auto);
    max-height: 100%;
    align-self: var(--cs-title-v-align-self, auto);
}

.beezwoo-cs--title-vertical-left .beezwoo-cs__title {
    transform: rotate(180deg);
    transform-origin: center;
}

.beezwoo-cs__count {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.beezwoo-cs__button {
    display: inline-block;
    padding: 10px 24px;
    background: var(--cs-btn-bg);
    color: var(--cs-btn-color);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--cs-btn-radius);
    margin: 0;
    transition: all 0.3s ease;
}

.beezwoo-cs__card:hover .beezwoo-cs__button {
    background: var(--cs-btn-color);
    color: var(--cs-btn-bg);
}

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */
.beezwoo-cs__grid {
    display: grid;
    grid-template-columns: repeat(var(--cs-grid-cols), 1fr);
    gap: var(--cs-grid-gap);
}

.beezwoo-cs__grid .beezwoo-cs__card {
    position: relative;
    min-height: var(--cs-grid-min-h);
    max-height: var(--cs-grid-max-h);
    aspect-ratio: 3/4;
}

/* ==========================================================================
   MASONRY LAYOUT - ENTERPRISE GRADE v3.2.0
   Uses CSS multi-column with varied heights for Pinterest-style effect
   ========================================================================== */
.beezwoo-cs__masonry {
    display: block !important;
    width: 100% !important;
    column-count: var(--cs-masonry-cols, 4) !important;
    column-gap: var(--cs-masonry-gap, 20px) !important;
    /* auto fills columns sequentially, balance tries to even them out */
    column-fill: auto;
}

/* Base masonry card styles */
.beezwoo-cs__masonry .beezwoo-cs__card {
    display: block !important;
    position: relative;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    margin-bottom: var(--cs-masonry-gap, 20px);
    width: 100% !important;
    /* Force explicit height for consistent masonry look */
    min-height: var(--cs-masonry-base-h, 280px) !important;
    height: var(--cs-masonry-base-h, 280px) !important;
}

/* Reset pseudo-element in masonry - prevent it from affecting layout */
.beezwoo-cs__masonry .beezwoo-cs__card::before {
    content: none;
    display: none;
    padding: 0 !important;
}

/* Allow hover-shine effect even on masonry cards */
.beezwoo-cs--hover-shine.beezwoo-cs .beezwoo-cs__masonry .beezwoo-cs__card::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    padding: 0 !important;
}

/* Card TALL - significantly taller cards for Pinterest effect */
.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--tall {
    min-height: var(--cs-masonry-tall-h, 450px) !important;
    height: var(--cs-masonry-tall-h, 450px) !important;
}

/* Card WIDE - shorter cards for Pinterest effect */
.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--wide {
    min-height: var(--cs-masonry-wide-h, 200px) !important;
    height: var(--cs-masonry-wide-h, 200px) !important;
}

/* ==========================================================================
   BENTO BOX LAYOUT - ENTERPRISE GRADE
   CSS Grid with named areas for precise control
   ========================================================================== */
.beezwoo-cs__bento {
    display: grid !important;
    width: 100%;
    /* Grid areas, columns, rows defined inline from PHP */
}

.beezwoo-cs__bento .beezwoo-cs__card {
    position: relative;
    min-height: 0;
    height: 100%;
    /* grid-area defined inline from PHP */
}

/* Remove aspect ratio pseudo-element in Bento */
.beezwoo-cs__bento .beezwoo-cs__card::before {
    display: none !important;
}

/* Ensure media fills the card completely in Bento */
.beezwoo-cs__bento .beezwoo-cs__media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.beezwoo-cs__bento .beezwoo-cs__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   MAGAZINE LAYOUT - ENTERPRISE GRADE
   Flexbox with row-reverse for alternating pattern
   ========================================================================== */
.beezwoo-cs__magazine {
    display: flex;
    flex-direction: column;
    gap: var(--cs-mag-gap, 20px);
    width: 100%;
}

/* Magazine Row Container */
.beezwoo-cs__magazine-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: var(--cs-mag-row-h, 400px);
    gap: var(--cs-mag-gap, 20px);
}

/* Reversed Row - Big section on the right */
.beezwoo-cs__magazine-row--reversed {
    flex-direction: row-reverse;
}

/* Big Section Container */
.beezwoo-cs__magazine-big {
    display: flex;
    flex-direction: column;
    /* flex set inline: flex: 0 0 60%; */
    height: 100%;
    min-height: inherit;
}

/* Small Section Container - Vertical stack */
.beezwoo-cs__magazine-small {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: inherit;
}

/* Cards inside Magazine sections */
.beezwoo-cs__magazine-big .beezwoo-cs__card,
.beezwoo-cs__magazine-small .beezwoo-cs__card {
    flex: 1;
    position: relative;
    min-height: 0;
    height: auto;
}

/* Remove aspect ratio pseudo in Magazine */
.beezwoo-cs__magazine .beezwoo-cs__card::before {
    display: none !important;
}

/* Ensure media fills card in Magazine */
.beezwoo-cs__magazine .beezwoo-cs__media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.beezwoo-cs__magazine .beezwoo-cs__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   LEGACY MAGAZINE SUPPORT (beezwoo-cs__mag-row class)
   ========================================================================== */
.beezwoo-cs__mag-row {
    display: grid;
    /* Grid defined inline from PHP */
}

/* ==========================================================================
   CAROUSEL LAYOUT
   ========================================================================== */
.beezwoo-cs__swiper {
    overflow: hidden;
    position: relative;
    padding-bottom: 50px;
    width: 100%;
    min-height: var(--cs-carousel-h, 400px);
}

.beezwoo-cs__swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    transition-timing-function: var(--cs-carousel-easing, ease-out) !important;
}

.beezwoo-cs__swiper .swiper-slide {
    height: var(--cs-carousel-h, 400px);
    min-height: 200px;
    flex-shrink: 0;
}

/* When using aspect-ratio mode, let the ratio drive the height */
.beezwoo-cs__swiper--aspect-ratio {
    min-height: auto;
}

.beezwoo-cs__swiper--aspect-ratio .swiper-slide {
    height: auto;
    min-height: 0;
}

.beezwoo-cs__swiper .beezwoo-cs__card {
    height: 100%;
    min-height: inherit;
    display: block;
}

/* Aspect-ratio on the CARD (not slide) — Swiper.js overrides slide height via JS */
.beezwoo-cs__swiper--aspect-ratio .beezwoo-cs__card {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--cs-carousel-aspect, 3/4);
}

.beezwoo-cs__swiper .beezwoo-cs__card::before {
    display: none;
}

/* Arrows */
.beezwoo-cs__swiper .swiper-button-prev,
.beezwoo-cs__swiper .swiper-button-next {
    width: 48px;
    height: 48px;
    background: var(--cs-arrows-bg);
    transition: all 0.3s ease;
}

.beezwoo-cs__swiper .swiper-button-prev:hover,
.beezwoo-cs__swiper .swiper-button-next:hover {
    transform: scale(1.1);
}

.beezwoo-cs__swiper .swiper-button-prev::after,
.beezwoo-cs__swiper .swiper-button-next::after {
    font-size: 18px;
    color: var(--cs-arrows-color);
}

.beezwoo-cs__swiper--circle .swiper-button-prev,
.beezwoo-cs__swiper--circle .swiper-button-next { border-radius: 50%; }

.beezwoo-cs__swiper--square .swiper-button-prev,
.beezwoo-cs__swiper--square .swiper-button-next { border-radius: 8px; }

.beezwoo-cs__swiper--minimal .swiper-button-prev,
.beezwoo-cs__swiper--minimal .swiper-button-next { background: transparent; }

/* Pagination */
.beezwoo-cs__swiper .swiper-pagination { bottom: 10px; }
.beezwoo-cs__swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(0,0,0,0.2); }
.beezwoo-cs__swiper .swiper-pagination-bullet-active { background: var(--cs-pagination-color, #333); }

/* ==========================================================================
   HOVER EFFECTS
   ========================================================================== */
.beezwoo-cs--hover-zoom .beezwoo-cs__card:hover .beezwoo-cs__image {
    transform: scale(1.08);
}

.beezwoo-cs--hover-shine .beezwoo-cs__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 15;
}
.beezwoo-cs--hover-shine .beezwoo-cs__card:hover::after {
    left: 150%;
}

.beezwoo-cs--hover-blur .beezwoo-cs__content { opacity: 0; }
.beezwoo-cs--hover-blur .beezwoo-cs__card:hover .beezwoo-cs__image { filter: blur(4px); }
.beezwoo-cs--hover-blur .beezwoo-cs__card:hover .beezwoo-cs__content { opacity: 1; }

.beezwoo-cs--hover-lift .beezwoo-cs__card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.beezwoo-cs--hover-lift .beezwoo-cs__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* TILT 3D Effect */
.beezwoo-cs--hover-tilt .beezwoo-cs__card {
    transition: transform var(--cs-transition);
    transform-style: preserve-3d;
    perspective: 1000px;
}
.beezwoo-cs--hover-tilt .beezwoo-cs__card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

/* GLOW Effect */
.beezwoo-cs--hover-glow .beezwoo-cs__card {
    transition: box-shadow var(--cs-transition), transform var(--cs-transition);
}
.beezwoo-cs--hover-glow .beezwoo-cs__card:hover {
    box-shadow: 0 0 30px var(--cs-glow-color, rgba(255,255,255,0.4)),
                0 0 60px var(--cs-glow-color, rgba(255,255,255,0.2)),
                0 8px 32px rgba(0,0,0,0.3);
    transform: translateY(-4px);
}

/* REVEAL Content Effect */
.beezwoo-cs--hover-reveal .beezwoo-cs__content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--cs-transition), transform var(--cs-transition);
}
.beezwoo-cs--hover-reveal .beezwoo-cs__card:hover .beezwoo-cs__content {
    opacity: 1;
    transform: translateY(0);
}
.beezwoo-cs--hover-reveal .beezwoo-cs__overlay {
    opacity: 0;
    transition: opacity var(--cs-transition);
}
.beezwoo-cs--hover-reveal .beezwoo-cs__card:hover .beezwoo-cs__overlay {
    opacity: var(--cs-overlay-opacity);
}

/* PARALLAX Depth 3D Effect */
.beezwoo-cs--hover-parallax .beezwoo-cs__card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.beezwoo-cs--hover-parallax .beezwoo-cs__media {
    transition: transform var(--cs-transition);
}
.beezwoo-cs--hover-parallax .beezwoo-cs__content {
    transform: translateZ(40px);
    transition: transform var(--cs-transition);
}
.beezwoo-cs--hover-parallax .beezwoo-cs__card:hover .beezwoo-cs__media {
    transform: scale(1.1) translateZ(-20px);
}
.beezwoo-cs--hover-parallax .beezwoo-cs__card:hover .beezwoo-cs__content {
    transform: translateZ(60px);
}

/* MAGNETIC Cursor Effect (JS-enhanced, CSS fallback) */
.beezwoo-cs--hover-magnetic .beezwoo-cs__card {
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.beezwoo-cs--hover-magnetic .beezwoo-cs__card:hover {
    transform: scale(1.03);
}

/* MORPH Border Effect */
.beezwoo-cs--hover-morph .beezwoo-cs__card {
    position: relative;
    transition: border-radius var(--cs-transition);
}
.beezwoo-cs--hover-morph .beezwoo-cs__card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg,
        var(--cs-morph-color-1, #ff6b6b),
        var(--cs-morph-color-2, #4ecdc4),
        var(--cs-morph-color-3, #45b7d1),
        var(--cs-morph-color-4, #96ceb4));
    background-size: 300% 300%;
    border-radius: calc(var(--cs-radius) + 3px);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--cs-transition);
    animation: morphBorderGradient 3s ease infinite paused;
}
.beezwoo-cs--hover-morph .beezwoo-cs__card:hover::before {
    opacity: 1;
    animation-play-state: running;
}
@keyframes morphBorderGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* NEON Glow Effect */
.beezwoo-cs--hover-neon .beezwoo-cs__card {
    transition: box-shadow var(--cs-transition), transform var(--cs-transition);
    --neon-color: var(--cs-neon-color, #00f5ff);
}
.beezwoo-cs--hover-neon .beezwoo-cs__card:hover {
    box-shadow:
        0 0 5px var(--neon-color),
        0 0 10px var(--neon-color),
        0 0 20px var(--neon-color),
        0 0 40px var(--neon-color),
        inset 0 0 10px rgba(255,255,255,0.1);
    transform: scale(1.01);
}
.beezwoo-cs--hover-neon .beezwoo-cs__title {
    text-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color);
    transition: text-shadow var(--cs-transition);
}

/* SPLIT Reveal Effect */
.beezwoo-cs--hover-split .beezwoo-cs__card {
    overflow: hidden;
}
.beezwoo-cs--hover-split .beezwoo-cs__media::before,
.beezwoo-cs--hover-split .beezwoo-cs__media::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: inherit;
    transition: transform var(--cs-transition);
    z-index: 3;
}
.beezwoo-cs--hover-split .beezwoo-cs__media::before {
    left: 0;
    transform-origin: left center;
}
.beezwoo-cs--hover-split .beezwoo-cs__media::after {
    right: 0;
    transform-origin: right center;
}
.beezwoo-cs--hover-split .beezwoo-cs__card:hover .beezwoo-cs__media::before {
    transform: translateX(-100%);
}
.beezwoo-cs--hover-split .beezwoo-cs__card:hover .beezwoo-cs__media::after {
    transform: translateX(100%);
}

/* GLITCH Effect */
.beezwoo-cs--hover-glitch .beezwoo-cs__card {
    position: relative;
}
.beezwoo-cs--hover-glitch .beezwoo-cs__image {
    transition: filter var(--cs-transition);
}
.beezwoo-cs--hover-glitch .beezwoo-cs__card:hover .beezwoo-cs__image {
    animation: glitchEffect 0.3s infinite;
}
@keyframes glitchEffect {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(-2px, -2px); filter: hue-rotate(180deg); }
    60% { transform: translate(2px, 2px); filter: hue-rotate(270deg); }
    80% { transform: translate(2px, -2px); filter: hue-rotate(360deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* ==========================================================================
   ENTRANCE ANIMATIONS - 2026 PREMIUM
   ========================================================================== */
/* Fade animations */
.beezwoo-cs--anim-fade-in .beezwoo-cs__card { opacity: 0; animation: fadeIn var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-fade-up .beezwoo-cs__card { opacity: 0; transform: translateY(30px); animation: fadeUp var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-fade-down .beezwoo-cs__card { opacity: 0; transform: translateY(-30px); animation: fadeDown var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-fade-left .beezwoo-cs__card { opacity: 0; transform: translateX(30px); animation: fadeLeft var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-fade-right .beezwoo-cs__card { opacity: 0; transform: translateX(-30px); animation: fadeRight var(--cs-entrance-duration, 600ms) ease forwards; }

/* Cascade animation (alternating left/right) */
.beezwoo-cs--anim-cascade .beezwoo-cs__card { opacity: 0; animation: cascadeIn var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-cascade .beezwoo-cs__card:nth-child(odd) { transform: translateX(-40px) rotate(-3deg); }
.beezwoo-cs--anim-cascade .beezwoo-cs__card:nth-child(even) { transform: translateX(40px) rotate(3deg); }

/* Blur Reveal */
.beezwoo-cs--anim-blur-reveal .beezwoo-cs__card {
    opacity: 0;
    filter: blur(20px);
    transform: scale(0.9);
    animation: blurReveal var(--cs-entrance-duration, 600ms) ease forwards;
}

/* Flip 3D */
.beezwoo-cs--anim-flip .beezwoo-cs__card {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
    animation: flip3D var(--cs-entrance-duration, 600ms) ease forwards;
}

/* Wave (ondulato) */
.beezwoo-cs--anim-wave .beezwoo-cs__card {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    animation: waveIn var(--cs-entrance-duration, 600ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Zoom animations */
.beezwoo-cs--anim-zoom-in .beezwoo-cs__card { opacity: 0; transform: scale(0.8); animation: zoomIn var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-zoom-out .beezwoo-cs__card { opacity: 0; transform: scale(1.2); animation: zoomOut var(--cs-entrance-duration, 600ms) ease forwards; }

/* Flip animations */
.beezwoo-cs--anim-flip-up .beezwoo-cs__card { opacity: 0; transform: perspective(1000px) rotateX(90deg); animation: flipUp var(--cs-entrance-duration, 600ms) ease forwards; }
.beezwoo-cs--anim-flip-down .beezwoo-cs__card { opacity: 0; transform: perspective(1000px) rotateX(-90deg); animation: flipDown var(--cs-entrance-duration, 600ms) ease forwards; }

/* Stagger delays */
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(1) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 0); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(2) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 1); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(3) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 2); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(4) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 3); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(5) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 4); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(6) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 5); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(7) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 6); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(8) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 7); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(9) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 8); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(10) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 9); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(11) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 10); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(12) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 11); }

/* Keyframes */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { to { opacity: 1; transform: translateX(0); } }
@keyframes cascadeIn { to { opacity: 1; transform: translateX(0) rotate(0deg); } }
@keyframes blurReveal { to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes flip3D { to { opacity: 1; transform: perspective(1000px) rotateY(0deg); } }
@keyframes waveIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes zoomIn { to { opacity: 1; transform: scale(1); } }
@keyframes zoomOut { to { opacity: 1; transform: scale(1); } }
@keyframes flipUp { to { opacity: 1; transform: perspective(1000px) rotateX(0deg); } }
@keyframes flipDown { to { opacity: 1; transform: perspective(1000px) rotateX(0deg); } }

/* ==========================================================================
   IMAGE EFFECTS - 2026 PREMIUM
   ========================================================================== */
/* Ken Burns Effect */
.beezwoo-cs--image-ken-burns .beezwoo-cs__image {
    animation: kenBurns 20s ease-in-out infinite alternate;
}
@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* Parallax on Scroll (requires JS, CSS sets up the transform) */
.beezwoo-cs--image-parallax .beezwoo-cs__media {
    overflow: hidden;
}
.beezwoo-cs--image-parallax .beezwoo-cs__image {
    transform: scale(1.2);
    transition: transform 0.1s linear;
    will-change: transform;
}

/* Blur to Sharp on Load */
.beezwoo-cs--image-blur-reveal .beezwoo-cs__image {
    filter: blur(10px);
    transform: scale(1.05);
    animation: imageBlurReveal 1.5s ease forwards;
}
@keyframes imageBlurReveal {
    to { filter: blur(0); transform: scale(1); }
}

/* ==========================================================================
   PRESETS - 2026 PREMIUM COLLECTION
   ========================================================================== */
.beezwoo-cs--preset-minimal .beezwoo-cs__overlay { opacity: 0 !important; }
.beezwoo-cs--preset-minimal .beezwoo-cs__card:hover .beezwoo-cs__overlay { opacity: 0.3 !important; }
.beezwoo-cs--preset-minimal .beezwoo-cs__title { font-weight: 400; }

.beezwoo-cs--preset-elegant .beezwoo-cs__title {
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 18px;
}

.beezwoo-cs--preset-bold .beezwoo-cs__title {
    font-weight: 800;
    font-size: 26px;
    text-transform: uppercase;
}

.beezwoo-cs--preset-fashion .beezwoo-cs__title {
    font-weight: 300;
    font-size: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.beezwoo-cs--preset-luxury .beezwoo-cs__card {
    border: 1px solid rgba(255,255,255,0.15);
}
.beezwoo-cs--preset-luxury .beezwoo-cs__title {
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 16px;
}

.beezwoo-cs--preset-glass .beezwoo-cs__content {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    margin: 15px;
}
.beezwoo-cs--preset-glass .beezwoo-cs__overlay { display: none; }

/* ==========================================================================
   2026 PREMIUM PRESETS
   ========================================================================== */

/* AURORA 2026 - Animated gradient premium */
.beezwoo-cs--preset-aurora .beezwoo-cs__card {
    position: relative;
    overflow: hidden;
}
.beezwoo-cs--preset-aurora .beezwoo-cs__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(139, 92, 246, 0.3) 0%,
        rgba(236, 72, 153, 0.3) 25%,
        rgba(59, 130, 246, 0.3) 50%,
        rgba(16, 185, 129, 0.3) 75%,
        rgba(139, 92, 246, 0.3) 100%
    );
    background-size: 400% 400%;
    animation: auroraGradient 8s ease infinite;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.beezwoo-cs--preset-aurora .beezwoo-cs__card:hover::before {
    opacity: 1;
}
.beezwoo-cs--preset-aurora .beezwoo-cs__title {
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #fff, #e0e7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.beezwoo-cs--preset-aurora .beezwoo-cs__overlay {
    background: linear-gradient(to top, rgba(17, 24, 39, 0.9) 0%, rgba(17, 24, 39, 0.3) 40%, transparent 70%);
}
@keyframes auroraGradient {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* GLASSMORPHISM 2026 - Modern frosted glass */
.beezwoo-cs--preset-glassmorphism .beezwoo-cs__card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.beezwoo-cs--preset-glassmorphism .beezwoo-cs__card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.beezwoo-cs--preset-glassmorphism .beezwoo-cs__content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    margin: 16px;
    padding: 20px;
}
.beezwoo-cs--preset-glassmorphism .beezwoo-cs__overlay {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    opacity: 1 !important;
}
.beezwoo-cs--preset-glassmorphism .beezwoo-cs__title {
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* BRUTALIST 2026 - Raw, bold, unpolished */
.beezwoo-cs--preset-brutalist .beezwoo-cs__card {
    border-radius: 0 !important;
    border: 4px solid #000;
    box-shadow: 8px 8px 0 #000;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.beezwoo-cs--preset-brutalist .beezwoo-cs__card:hover {
    box-shadow: 12px 12px 0 #000;
    transform: translate(-4px, -4px);
}
.beezwoo-cs--preset-brutalist .beezwoo-cs__title {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #fff;
    background: #000;
    padding: 8px 12px;
    display: inline-block;
}
.beezwoo-cs--preset-brutalist .beezwoo-cs__overlay {
    display: none;
}
.beezwoo-cs--preset-brutalist .beezwoo-cs__content {
    background: transparent;
}
.beezwoo-cs--preset-brutalist .beezwoo-cs__count {
    background: #ff0;
    color: #000;
    padding: 4px 8px;
    font-weight: 700;
}

/* NEOMORPHISM 2026 - Soft 3D, morbido */
.beezwoo-cs--preset-neomorphism .beezwoo-cs__card {
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    border-radius: 20px !important;
    border: none;
    box-shadow:
        20px 20px 60px #d1d1d1,
        -20px -20px 60px #ffffff,
        inset 0 0 0 1px rgba(255,255,255,0.5);
}
.beezwoo-cs--preset-neomorphism .beezwoo-cs__card:hover {
    box-shadow:
        25px 25px 70px #c8c8c8,
        -25px -25px 70px #ffffff,
        inset 0 0 0 1px rgba(255,255,255,0.7);
}
.beezwoo-cs--preset-neomorphism .beezwoo-cs__content {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    margin: 16px;
    padding: 16px;
    box-shadow:
        inset 5px 5px 10px #d1d1d1,
        inset -5px -5px 10px #ffffff;
}
.beezwoo-cs--preset-neomorphism .beezwoo-cs__title {
    color: #2d3748;
    font-weight: 600;
}
.beezwoo-cs--preset-neomorphism .beezwoo-cs__count {
    color: #718096;
}
.beezwoo-cs--preset-neomorphism .beezwoo-cs__overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.8) 0%, transparent 50%);
    opacity: 0.6 !important;
}

/* LUXURY GOLD 2026 - Premium oro e lusso */
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__card {
    border: 2px solid transparent;
    background:
        linear-gradient(#0a0a0a, #0a0a0a) padding-box,
        linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) border-box;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,215,0,0.1);
}
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__card:hover {
    box-shadow:
        0 15px 50px rgba(0,0,0,0.6),
        0 0 30px rgba(212,175,55,0.3),
        inset 0 1px 0 rgba(255,215,0,0.2);
}
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__title {
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 3s ease infinite;
}
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__count {
    color: #d4af37;
    font-weight: 300;
    letter-spacing: 0.1em;
}
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__overlay {
    background: linear-gradient(to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.6) 30%,
        rgba(0,0,0,0.2) 60%,
        transparent 100%);
}
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__button {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728);
    color: #000;
    border: none;
    font-weight: 600;
    letter-spacing: 0.1em;
}
@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* CYBERPUNK 2026 - Neon futuristico */
.beezwoo-cs--preset-cyberpunk .beezwoo-cs__card {
    border: 2px solid #00f5ff;
    box-shadow:
        0 0 10px rgba(0,245,255,0.5),
        0 0 20px rgba(0,245,255,0.3),
        inset 0 0 20px rgba(0,245,255,0.1);
}
.beezwoo-cs--preset-cyberpunk .beezwoo-cs__card:hover {
    box-shadow:
        0 0 20px rgba(0,245,255,0.8),
        0 0 40px rgba(0,245,255,0.5),
        0 0 60px rgba(255,0,128,0.3),
        inset 0 0 30px rgba(0,245,255,0.2);
}
.beezwoo-cs--preset-cyberpunk .beezwoo-cs__title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #00f5ff;
    text-shadow:
        0 0 10px #00f5ff,
        0 0 20px #00f5ff,
        0 0 40px #00f5ff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.beezwoo-cs--preset-cyberpunk .beezwoo-cs__count {
    color: #ff0080;
    text-shadow: 0 0 10px #ff0080;
}
.beezwoo-cs--preset-cyberpunk .beezwoo-cs__overlay {
    background: linear-gradient(to top,
        rgba(0,0,20,0.95) 0%,
        rgba(0,0,20,0.5) 50%,
        transparent 100%);
}

/* ORGANIC 2026 - Natural, soft curves */
.beezwoo-cs--preset-organic .beezwoo-cs__card {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
    transition: border-radius 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    box-shadow: 0 20px 60px rgba(76, 175, 80, 0.2);
}
.beezwoo-cs--preset-organic .beezwoo-cs__card:hover {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important;
    box-shadow: 0 25px 70px rgba(76, 175, 80, 0.3);
}
.beezwoo-cs--preset-organic .beezwoo-cs__media {
    border-radius: inherit;
}
.beezwoo-cs--preset-organic .beezwoo-cs__title {
    font-weight: 400;
    font-style: italic;
    color: #fff;
}
.beezwoo-cs--preset-organic .beezwoo-cs__overlay {
    background: linear-gradient(to top,
        rgba(46, 125, 50, 0.8) 0%,
        rgba(46, 125, 50, 0.3) 40%,
        transparent 70%);
}

/* ==========================================================================
   TABLET RESPONSIVE - ENTERPRISE GRADE COMPLETE
   ========================================================================== */
@media (max-width: 1024px) {
    /* Grid tablet - using CSS variables */
    .beezwoo-cs__grid {
        grid-template-columns: repeat(var(--cs-tablet-cols), 1fr);
        gap: var(--cs-tablet-gap);
    }
    .beezwoo-cs__grid .beezwoo-cs__card {
        min-height: var(--cs-tablet-card-min-h, 200px);
        max-height: var(--cs-tablet-card-max-h, 350px);
    }
    
    /* Masonry tablet - using CSS variables */
    .beezwoo-cs__masonry {
        column-count: var(--cs-tablet-masonry-cols, var(--cs-tablet-cols));
        column-gap: var(--cs-tablet-gap);
    }
    
    /* Carousel tablet - using CSS variables */
    .beezwoo-cs__swiper {
        min-height: var(--cs-tablet-carousel-h, 350px);
        --swiper-navigation-size: 18px;
    }
    .beezwoo-cs__swiper--aspect-ratio {
        min-height: auto;
    }
    .beezwoo-cs__swiper .swiper-slide {
        height: var(--cs-tablet-carousel-h, 350px);
        min-height: 200px;
    }
    .beezwoo-cs__swiper--aspect-ratio .swiper-slide {
        height: auto;
        min-height: 0;
    }
    .beezwoo-cs__swiper--aspect-ratio .beezwoo-cs__card {
        height: auto;
        min-height: 0;
        aspect-ratio: var(--cs-carousel-aspect, 3/4);
    }

    /* Tablet Carousel Mode - when tablet_layout = carousel (non-Swiper fallback) */
    .beezwoo-cs--tablet-carousel .beezwoo-cs__wrapper.beezwoo-cs__grid,
    .beezwoo-cs--tablet-carousel .beezwoo-cs__wrapper.beezwoo-cs__masonry,
    .beezwoo-cs--tablet-carousel .beezwoo-cs__wrapper.beezwoo-cs__bento,
    .beezwoo-cs--tablet-carousel .beezwoo-cs__wrapper.beezwoo-cs__magazine {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--cs-tablet-carousel-space, 15px) !important;
        column-count: unset !important;
        padding-bottom: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .beezwoo-cs--tablet-carousel .beezwoo-cs__wrapper::-webkit-scrollbar {
        display: none;
    }
    .beezwoo-cs--tablet-carousel .beezwoo-cs__wrapper > *,
    .beezwoo-cs--tablet-carousel .beezwoo-cs__magazine-row,
    .beezwoo-cs--tablet-carousel .beezwoo-cs__magazine-big,
    .beezwoo-cs--tablet-carousel .beezwoo-cs__magazine-small {
        display: contents !important;
    }
    .beezwoo-cs--tablet-carousel .beezwoo-cs__card {
        flex: 0 0 45vw !important;
        width: 45vw !important;
        max-width: 45vw !important;
        min-height: var(--cs-tablet-carousel-h, 350px) !important;
        height: var(--cs-tablet-carousel-h, 350px) !important;
        scroll-snap-align: start;
        grid-area: unset !important;
        grid-column: unset !important;
        margin: 0 !important;
    }
    
    /* Bento tablet - ENTERPRISE responsive grid */
    .beezwoo-cs__bento {
        height: var(--cs-tablet-bento-h, auto) !important;
        grid-template-areas: none !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        grid-auto-rows: var(--cs-tablet-bento-card-h, 220px) !important;
    }
    .beezwoo-cs__bento .beezwoo-cs__card {
        grid-area: auto !important;
    }
    .beezwoo-cs__bento .beezwoo-cs__card:first-child {
        grid-column: span 2;
        min-height: var(--cs-tablet-bento-first-h, 300px);
    }
    
    /* Bento tablet - single column if configured */
    .beezwoo-cs__bento.beezwoo-cs__bento--tablet-single-col {
        grid-template-columns: 1fr !important;
    }
    .beezwoo-cs__bento.beezwoo-cs__bento--tablet-single-col .beezwoo-cs__card:first-child {
        grid-column: span 1 !important;
    }
    
    /* Magazine tablet - 2 columns layout */
    .beezwoo-cs__magazine-row {
        flex-wrap: wrap !important;
        min-height: var(--cs-tablet-mag-row-h, auto) !important;
    }
    .beezwoo-cs__magazine-row--reversed {
        flex-direction: row !important; /* No reverse on tablet */
    }
    .beezwoo-cs__magazine-big {
        flex: 1 1 100% !important;
        min-height: var(--cs-tablet-mag-big-h, 280px) !important;
    }
    .beezwoo-cs__magazine-small {
        flex: 1 1 100% !important;
        flex-direction: row !important; /* Side by side on tablet */
    }
    .beezwoo-cs__magazine-small .beezwoo-cs__card {
        min-height: var(--cs-tablet-mag-small-h, 200px) !important;
    }
    
    /* Magazine tablet stack mode */
    .beezwoo-cs__magazine.beezwoo-cs__magazine--tablet-stack .beezwoo-cs__magazine-small {
        flex-direction: column !important;
    }
    
    /* Legacy magazine tablet */
    .beezwoo-cs__mag-row {
        grid-template-areas: none !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        min-height: auto !important;
    }
    .beezwoo-cs__magazine .beezwoo-cs__card--big {
        grid-column: span 2;
        min-height: var(--cs-tablet-mag-big-h, 280px);
    }
    .beezwoo-cs__magazine .beezwoo-cs__card--small {
        min-height: var(--cs-tablet-mag-small-h, 200px);
    }
    
    .beezwoo-cs__swiper .swiper-button-prev,
    .beezwoo-cs__swiper .swiper-button-next {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE - ENTERPRISE GRADE COMPLETE WITH CSS VARIABLES
   ========================================================================== */
@media (max-width: 767px) {
    /* CRITICAL: Main container mobile fix */
    .beezwoo-cs {
        margin-top: 0;
        margin-bottom: 20px;
        overflow: visible;
    }

    /* ==========================================================================
       MOBILE TAP FEEDBACK - Premium Feature
       Visual + Haptic feedback when tapping cards
       ========================================================================== */
    .beezwoo-cs__card {
        -webkit-tap-highlight-color: transparent !important; /* Remove default iOS tap highlight */
        -webkit-touch-callout: none; /* iOS Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version */
    }

    .beezwoo-cs__media {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .beezwoo-cs__card.is-touch-active .beezwoo-cs__media {
        transform: scale(1.05);
    }

    /* More subtle feedback for special mobile modes (stories/tinder) */
    .beezwoo-cs--mobile-stories .beezwoo-cs__card:active,
    .beezwoo-cs--mobile-tinder .beezwoo-cs__card:active {
        transform: scale(0.99) !important;
        opacity: 0.95 !important;
    }

    /* Grid mobile - using CSS variables */
    .beezwoo-cs__grid {
        display: grid !important;
        grid-template-columns: repeat(var(--cs-mobile-cols, 2), 1fr) !important;
        gap: var(--cs-mobile-gap, 10px) !important;
    }
    .beezwoo-cs__grid .beezwoo-cs__card {
        min-height: var(--cs-mobile-card-min-h, 150px);
        max-height: var(--cs-mobile-card-max-h, 280px);
    }

    /* ==========================================================================
       MASONRY MOBILE FIX - SUPER ROBUST 2026
       Fixed: Column layout, proper heights, no jumping, smooth rendering
       ========================================================================== */
    .beezwoo-cs__masonry {
        /* Force proper column layout */
        display: block !important;
        width: 100% !important;
        column-count: var(--cs-mobile-masonry-cols, var(--cs-mobile-cols, 1)) !important;
        column-gap: var(--cs-mobile-gap, 10px) !important;
        column-fill: balance !important; /* 'balance' distributes across 2 columns evenly */

        /* Prevent column break issues */
        orphans: 1 !important;
        widows: 1 !important;
    }

    /* All cards default behavior - ROBUST & NO JUMPING */
    .beezwoo-cs__masonry .beezwoo-cs__card {
        /* Column behavior */
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;

        /* Display & Layout */
        display: block !important;
        width: 100% !important;
        margin: 0 0 var(--cs-mobile-gap, 10px) 0 !important;
        padding: 0 !important;

        /* CRITICAL: Remove all grid/flex properties that could interfere */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
        flex: none !important;
        flex-basis: auto !important;

        /* Base height - FIXED for consistent masonry */
        min-height: var(--cs-mobile-card-min-h, 150px) !important;
        height: var(--cs-mobile-card-min-h, 250px) !important; /* Fixed height, pattern overrides below */
        max-height: none !important;

        /* Prevent overflow issues */
        overflow: hidden !important;
        box-sizing: border-box !important;

        /* GPU optimization for smooth rendering */
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* CRITICAL: First card NO special treatment (fix "saltato" issue) */
    .beezwoo-cs__masonry .beezwoo-cs__card:first-child {
        column-span: none !important;
        -webkit-column-span: none !important;
        width: 100% !important;
        /* Same as other cards - no special height */
    }

    /* ==========================================================================
       MASONRY HEIGHTS - Moderate variation that works WITH column-fill: balance
       Uses min-height so balance algorithm can adjust while respecting minimums
       ========================================================================== */

    /* Pattern with FIXED heights (not min) - DEFINITIVE solution */
    /* Alternating pattern: Alto-Basso-Medio-Alto */

    .beezwoo-cs__masonry .beezwoo-cs__card:nth-child(4n+1) {
        height: calc(var(--cs-mobile-card-min-h, 250px) * 1.6) !important; /* 400px - Molto alto (sinistra) */
    }
    .beezwoo-cs__masonry .beezwoo-cs__card:nth-child(4n+2) {
        height: calc(var(--cs-mobile-card-min-h, 250px) * 0.88) !important; /* 220px - Molto basso (destra) */
    }
    .beezwoo-cs__masonry .beezwoo-cs__card:nth-child(4n+3) {
        height: calc(var(--cs-mobile-card-min-h, 250px) * 1.2) !important; /* 300px - Medio */
    }
    .beezwoo-cs__masonry .beezwoo-cs__card:nth-child(4n+4) {
        height: calc(var(--cs-mobile-card-min-h, 250px) * 1.4) !important; /* 350px - Medio-alto */
    }

    /* OVERRIDE per --tall e --wide classes (se presenti dal PHP) */
    .beezwoo-cs__masonry .beezwoo-cs__card--tall {
        height: calc(var(--cs-mobile-card-min-h, 250px) * 1.6) !important; /* 400px - Più alto */
    }
    .beezwoo-cs__masonry .beezwoo-cs__card--wide {
        height: var(--cs-mobile-card-min-h, 250px) !important; /* 250px - Base */
    }

    /* FIXED: Image AND Video fill card properly */
    .beezwoo-cs__masonry .beezwoo-cs__image,
    .beezwoo-cs__masonry .beezwoo-cs__video {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* ==========================================================================
       MOBILE FEATURED CARDS - 2 Column Span (Manual Selection)
       ========================================================================== */
    /* Only when masonry columns >= 2 */
    .beezwoo-cs__masonry[style*="--cs-mobile-masonry-cols: 2"] .beezwoo-cs__card--mobile-featured,
    .beezwoo-cs__masonry[style*="--cs-mobile-masonry-cols: 3"] .beezwoo-cs__card--mobile-featured {
        -webkit-column-span: all !important;
        column-span: all !important;
        width: 100% !important;
        margin-bottom: calc(var(--cs-mobile-gap, 10px) * 1.5) !important;

        /* Slightly taller for emphasis */
        min-height: calc(var(--cs-mobile-card-min-h, 150px) * 1.3) !important;
    }

    /* Carousel mobile - using CSS variables */
    .beezwoo-cs__swiper {
        min-height: var(--cs-mobile-carousel-h, 280px);
    }
    .beezwoo-cs__swiper--aspect-ratio {
        min-height: auto;
    }
    .beezwoo-cs__swiper .swiper-slide {
        height: var(--cs-mobile-carousel-h, 280px);
        min-height: 180px;
    }
    .beezwoo-cs__swiper--aspect-ratio .swiper-slide {
        height: auto;
        min-height: 0;
    }
    .beezwoo-cs__swiper--aspect-ratio .beezwoo-cs__card {
        height: auto;
        min-height: 0;
        aspect-ratio: var(--cs-carousel-aspect, 3/4);
    }

    /* Mobile Carousel Mode - when mobile_layout = carousel */
    .beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper.beezwoo-cs__grid,
    .beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper.beezwoo-cs__masonry,
    .beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper.beezwoo-cs__bento,
    .beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper.beezwoo-cs__magazine {
        /* Convert non-carousel layouts to horizontal scroll on mobile */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--cs-mobile-carousel-space, 10px) !important;
        column-count: unset !important;
        padding-bottom: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper::-webkit-scrollbar {
        display: none;
    }
    .beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper > *,
    .beezwoo-cs--mobile-carousel .beezwoo-cs__magazine-row,
    .beezwoo-cs--mobile-carousel .beezwoo-cs__magazine-big,
    .beezwoo-cs--mobile-carousel .beezwoo-cs__magazine-small {
        display: contents !important;
    }
    .beezwoo-cs--mobile-carousel .beezwoo-cs__card {
        flex: 0 0 80vw !important;
        width: 80vw !important;
        max-width: 80vw !important;
        min-height: var(--cs-mobile-carousel-h, 280px) !important;
        height: var(--cs-mobile-carousel-h, 280px) !important;
        scroll-snap-align: center;
        grid-area: unset !important;
        grid-column: unset !important;
        margin: 0 !important;
    }
    .beezwoo-cs--mobile-carousel .beezwoo-cs__card::before {
        display: none !important;
    }

    /* Mobile Grid Mode - when mobile_layout = grid */
    .beezwoo-cs--mobile-grid .beezwoo-cs__wrapper {
        display: grid !important;
        grid-template-columns: repeat(var(--cs-mobile-cols, 2), 1fr) !important;
        gap: var(--cs-mobile-gap, 10px) !important;
        column-count: unset !important;
    }
    .beezwoo-cs--mobile-grid .beezwoo-cs__wrapper > *,
    .beezwoo-cs--mobile-grid .beezwoo-cs__magazine-row,
    .beezwoo-cs--mobile-grid .beezwoo-cs__magazine-big,
    .beezwoo-cs--mobile-grid .beezwoo-cs__magazine-small {
        display: contents !important;
    }
    .beezwoo-cs--mobile-grid .beezwoo-cs__card {
        min-height: var(--cs-mobile-card-min-h, 150px) !important;
        height: auto !important;
        aspect-ratio: 3/4;
        grid-area: unset !important;
        grid-column: unset !important;
        margin: 0 !important;
    }
    
    /* Bento mobile - single column stack with CSS variables */
    .beezwoo-cs__bento {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        height: auto !important;
        grid-auto-rows: var(--cs-mobile-bento-card-h, 200px) !important;
    }
    .beezwoo-cs__bento .beezwoo-cs__card {
        grid-area: auto !important;
    }
    .beezwoo-cs__bento .beezwoo-cs__card:first-child {
        grid-column: span 1 !important;
        min-height: var(--cs-mobile-bento-first-h, 280px) !important;
    }
    
    /* Magazine mobile - ENTERPRISE vertical stack with CSS variables */
    .beezwoo-cs__magazine-row {
        flex-direction: column !important;
        min-height: auto !important;
        gap: var(--cs-mobile-gap, 10px) !important;
    }
    .beezwoo-cs__magazine-row--reversed {
        flex-direction: column !important; /* Same on mobile */
    }
    .beezwoo-cs__magazine-big {
        flex: none !important;
        width: 100% !important;
    }
    .beezwoo-cs__magazine-big .beezwoo-cs__card {
        min-height: var(--cs-mobile-mag-big-h, 280px) !important;
    }
    .beezwoo-cs__magazine-small {
        flex: none !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: var(--cs-mobile-gap, 10px) !important;
    }
    .beezwoo-cs__magazine-small .beezwoo-cs__card {
        min-height: var(--cs-mobile-mag-small-h, 180px) !important;
    }
    
    /* Legacy magazine mobile */
    .beezwoo-cs__mag-row {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: var(--cs-mobile-gap) !important;
    }
    .beezwoo-cs__magazine .beezwoo-cs__card--big {
        grid-column: span 1 !important;
        min-height: var(--cs-mobile-mag-big-h, 280px) !important;
    }
    .beezwoo-cs__magazine .beezwoo-cs__card--small {
        min-height: var(--cs-mobile-mag-small-h, 180px) !important;
    }
    
    /* Hide arrows mobile */
    .beezwoo-cs__swiper .swiper-button-prev,
    .beezwoo-cs__swiper .swiper-button-next {
        display: none;
    }

    /* Re-enable arrows on mobile when explicitly requested */
    .beezwoo-cs--mobile-carousel-arrows .beezwoo-cs__swiper .swiper-button-prev,
    .beezwoo-cs--mobile-carousel-arrows .beezwoo-cs__swiper .swiper-button-next {
        display: flex;
    }
    
    .beezwoo-cs__title { font-size: 18px; }
    .beezwoo-cs__button { padding: 8px 18px; font-size: 12px; }

    /* ============================================
       STORIES MODE - FIXED: Horizontal swipe stories
       ============================================ */
    .beezwoo-cs--mobile-stories .beezwoo-cs__wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        column-count: unset !important;
        /* CRITICAL FIX: Use explicit height, not auto */
        height: var(--cs-mobile-h, 85vh) !important;
        min-height: 400px;
        padding-bottom: 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .beezwoo-cs--mobile-stories .beezwoo-cs__wrapper::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Reset all nested containers in stories mode */
    .beezwoo-cs--mobile-stories .beezwoo-cs__wrapper > *,
    .beezwoo-cs--mobile-stories .beezwoo-cs__mag-row,
    .beezwoo-cs--mobile-stories .beezwoo-cs__magazine-row,
    .beezwoo-cs--mobile-stories .beezwoo-cs__magazine-big,
    .beezwoo-cs--mobile-stories .beezwoo-cs__magazine-small {
        display: contents !important;
    }

    .beezwoo-cs--mobile-stories .beezwoo-cs__card {
        flex: 0 0 100vw !important;
        width: 100vw !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        scroll-snap-align: start;
        border-radius: 0 !important;
        grid-area: unset !important;
        grid-column: unset !important;
        margin: 0 !important;
    }

    .beezwoo-cs--mobile-stories .beezwoo-cs__card::before {
        display: none !important;
    }

    .beezwoo-cs--mobile-stories .beezwoo-cs__content {
        position: absolute !important;
        bottom: 60px !important;
        left: 20px !important;
        right: 20px !important;
        top: auto !important;
    }

    /* Progress bar indicator at top */
    .beezwoo-cs--mobile-stories .beezwoo-cs__card::after {
        content: '';
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        height: 3px;
        background: rgba(255,255,255,0.35);
        border-radius: 2px;
        z-index: 20;
    }

    /* ============================================
       TINDER MODE - FIXED: Card stack with swipe
       ============================================ */
    .beezwoo-cs--mobile-tinder .beezwoo-cs__wrapper {
        position: relative !important;
        /* CRITICAL FIX: Use explicit height */
        height: var(--cs-mobile-h, 85vh) !important;
        min-height: 400px;
        display: block !important;
        column-count: unset !important;
        overflow: visible !important;
    }

    /* Reset nested containers in tinder mode */
    .beezwoo-cs--mobile-tinder .beezwoo-cs__mag-row,
    .beezwoo-cs--mobile-tinder .beezwoo-cs__magazine-row,
    .beezwoo-cs--mobile-tinder .beezwoo-cs__magazine-big,
    .beezwoo-cs--mobile-tinder .beezwoo-cs__magazine-small {
        display: contents !important;
    }

    .beezwoo-cs--mobile-tinder .beezwoo-cs__card {
        position: absolute !important;
        top: 10px !important;
        left: 5% !important;
        right: 5% !important;
        bottom: 10px !important;
        width: 90% !important;
        height: calc(100% - 20px) !important;
        min-height: 0 !important;
        grid-area: unset !important;
        transform-origin: bottom center;
        transition: transform 0.3s ease, opacity 0.3s ease;
        border-radius: var(--cs-radius, 12px) !important;
        margin: 0 !important;
    }

    .beezwoo-cs--mobile-tinder .beezwoo-cs__card::before {
        display: none !important;
    }

    /* Stack effect - only show top 3 cards */
    .beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(n+4) {
        display: none !important;
    }
    .beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(3) {
        transform: scale(0.88) translateY(-30px);
        opacity: 0.5;
        z-index: 1;
    }
    .beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(2) {
        transform: scale(0.94) translateY(-15px);
        opacity: 0.75;
        z-index: 2;
    }
    .beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(1) {
        transform: scale(1) translateY(0);
        opacity: 1;
        z-index: 3;
    }

    /* ============================================
       FULLSCREEN SNAP MODE - FIXED: Vertical scroll snap
       ============================================ */
    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__wrapper {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        scroll-snap-type: y mandatory;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* CRITICAL FIX: Use viewport height */
        height: 100vh !important;
        max-height: 100vh !important;
        gap: 0 !important;
        column-count: unset !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Reset nested containers in fullscreen mode */
    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__mag-row,
    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__magazine-row,
    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__magazine-big,
    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__magazine-small {
        display: contents !important;
    }

    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__card {
        flex: 0 0 var(--cs-mobile-h, 85vh) !important;
        width: 100% !important;
        min-height: var(--cs-mobile-h, 85vh) !important;
        height: var(--cs-mobile-h, 85vh) !important;
        scroll-snap-align: start;
        border-radius: 0 !important;
        grid-area: unset !important;
        margin: 0 !important;
    }

    .beezwoo-cs--mobile-fullscreen .beezwoo-cs__card::before {
        display: none !important;
    }

    /* ============================================
       STACK MODE - FIXED: Tap to cycle through cards
       ============================================ */
    .beezwoo-cs--mobile-stack .beezwoo-cs__wrapper {
        position: relative !important;
        height: var(--cs-mobile-h, 85vh) !important;
        min-height: 400px;
        display: block !important;
        column-count: unset !important;
        perspective: 1000px;
    }

    .beezwoo-cs--mobile-stack .beezwoo-cs__mag-row,
    .beezwoo-cs--mobile-stack .beezwoo-cs__magazine-row,
    .beezwoo-cs--mobile-stack .beezwoo-cs__magazine-big,
    .beezwoo-cs--mobile-stack .beezwoo-cs__magazine-small {
        display: contents !important;
    }

    .beezwoo-cs--mobile-stack .beezwoo-cs__card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        grid-area: unset !important;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
        transform-style: preserve-3d;
        border-radius: var(--cs-radius, 12px) !important;
        margin: 0 !important;
    }

    .beezwoo-cs--mobile-stack .beezwoo-cs__card::before {
        display: none !important;
    }

    /* Stack depth effect */
    .beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(n+4) {
        display: none !important;
    }
    .beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(3) {
        transform: translateZ(-40px) scale(0.92);
        opacity: 0.4;
        z-index: 1;
    }
    .beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(2) {
        transform: translateZ(-20px) scale(0.96);
        opacity: 0.7;
        z-index: 2;
    }
    .beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(1) {
        transform: translateZ(0) scale(1);
        opacity: 1;
        z-index: 3;
    }
}

/* ==========================================================================
   ROTATED TITLE - Vertical, solid implementation
   ========================================================================== */
/* NOTE: Title positioning/rotation/background is implemented in the main CONTENT section above via CSS variables.
   Keep only small responsive tweaks below. */

@media (max-width: 480px) {
    .beezwoo-cs--title-vertical-left .beezwoo-cs__title,
    .beezwoo-cs--title-vertical-right .beezwoo-cs__title {
        font-size: clamp(16px, 5vw, 20px);
        letter-spacing: 0.08em;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .beezwoo-cs__image,
    .beezwoo-cs__content,
    .beezwoo-cs__overlay,
    .beezwoo-cs__card,
    .beezwoo-cs__video {
        transition: none !important;
    }
}

.beezwoo-cs__card:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.beezwoo-cs__card:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   ELEMENTOR EDITOR PREVIEW STYLES - ENTERPRISE GRADE
   ========================================================================== */

/* Editor preview wrapper */
.beezwoo-cs--editor-preview {
    position: relative;
    min-height: 200px; /* Prevent collapse */
}

/* ==========================================================================
   LAYOUT RESET - Prevent conflicts when switching layouts
   ========================================================================== */
/* Reset wrapper when NOT using specific layout */
.beezwoo-cs--editor-preview .beezwoo-cs__wrapper {
    /* Reset all layout-specific properties */
    column-count: unset;
    column-gap: unset;
    grid-template-columns: unset;
    grid-template-rows: unset;
    grid-template-areas: unset;
}

/* Only apply masonry styles when masonry class is present */
.beezwoo-cs--editor-preview .beezwoo-cs__wrapper.beezwoo-cs__masonry {
    display: block !important;
    column-count: var(--cs-masonry-cols, 4) !important;
    column-gap: var(--cs-masonry-gap, 20px) !important;
}

/* Only apply grid styles when grid class is present */
.beezwoo-cs--editor-preview .beezwoo-cs__wrapper.beezwoo-cs__grid {
    display: grid !important;
    column-count: unset !important;
}

/* Only apply bento styles when bento class is present */
.beezwoo-cs--editor-preview .beezwoo-cs__wrapper.beezwoo-cs__bento {
    display: grid !important;
    column-count: unset !important;
}

/* Only apply magazine styles when magazine class is present */
.beezwoo-cs--editor-preview .beezwoo-cs__wrapper.beezwoo-cs__magazine {
    display: flex !important;
    column-count: unset !important;
}

/* Only apply swiper styles when swiper class is present */
.beezwoo-cs--editor-preview .beezwoo-cs__wrapper.beezwoo-cs__swiper {
    display: block !important;
    column-count: unset !important;
}

/* Editor badge */
.beezwoo-cs__editor-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: linear-gradient(135deg, #D4A484, #8B7355) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    pointer-events: none !important;
}

/* Preview cards - ensure they display properly */
.beezwoo-cs--editor-preview .beezwoo-cs__card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--cs-radius, 12px) !important;
    min-height: 200px; /* Default min-height for all preview cards */
    box-sizing: border-box;
}

/* Ensure preview cards never collapse */
.beezwoo-cs--editor-preview .beezwoo-cs__card:empty::after {
    content: '';
    display: block;
    min-height: inherit;
}

/* Preview Magazine layout fixes */
.beezwoo-cs--editor-preview .beezwoo-cs__magazine {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cs-mag-gap, 20px) !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__magazine-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: var(--cs-mag-row-h, 400px) !important;
    gap: var(--cs-mag-gap, 20px) !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__magazine-row--reversed {
    flex-direction: row-reverse !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__magazine-big {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 var(--cs-mag-big-w, 60%) !important;
    gap: var(--cs-mag-gap, 20px) !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__magazine-small {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: var(--cs-mag-gap, 20px) !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__magazine-big .beezwoo-cs__card,
.beezwoo-cs--editor-preview .beezwoo-cs__magazine-small .beezwoo-cs__card {
    flex: 1 1 auto !important;
    min-height: 120px !important; /* CRITICAL: Never set to 0 - cards will collapse */
}

/* Preview Bento layout fixes */
.beezwoo-cs--editor-preview .beezwoo-cs__bento {
    display: grid !important;
    min-height: var(--cs-bento-h, 600px) !important;
    /* Reset masonry properties */
    column-count: unset !important;
    column-gap: unset !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__bento .beezwoo-cs__card {
    height: 100% !important;
    min-height: 150px !important; /* Fallback if grid-area fails */
    /* Reset masonry properties */
    break-inside: unset !important;
    margin-bottom: 0 !important;
}

/* Preview Grid layout - Complete styles */
.beezwoo-cs--editor-preview .beezwoo-cs__grid {
    display: grid !important;
    grid-template-columns: repeat(var(--cs-grid-cols, 4), 1fr) !important;
    gap: var(--cs-grid-gap, 20px) !important;
    /* Reset masonry properties */
    column-count: unset !important;
    column-gap: unset !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__grid .beezwoo-cs__card {
    display: block !important;
    min-height: var(--cs-grid-min-h, 250px) !important;
    /* Reset masonry properties */
    break-inside: unset !important;
    margin-bottom: 0 !important;
}

/* Preview Masonry layout - Complete styles - FIXED v3.2.0 */
.beezwoo-cs--editor-preview .beezwoo-cs__masonry {
    display: block !important;
    column-count: var(--cs-masonry-cols, 4) !important;
    column-gap: var(--cs-masonry-gap, 20px) !important;
    column-fill: balance;
    /* Reset grid properties */
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__masonry .beezwoo-cs__card {
    display: block !important;
    /* CRITICAL: Use both min-height AND height for consistent rendering */
    min-height: var(--cs-masonry-base-h, 280px) !important;
    height: var(--cs-masonry-base-h, 280px) !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    margin-bottom: var(--cs-masonry-gap, 20px) !important;
    width: 100% !important;
    /* Reset flex properties */
    flex: unset !important;
    /* Reset grid properties */
    grid-area: unset !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__masonry .beezwoo-cs__card::before {
    content: none !important;
    display: none !important;
    padding: 0 !important;
}

/* CRITICAL: Tall cards in editor preview - use double selector for specificity */
.beezwoo-cs--editor-preview .beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--tall {
    min-height: var(--cs-masonry-tall-h, 450px) !important;
    height: var(--cs-masonry-tall-h, 450px) !important;
}

/* CRITICAL: Wide cards in editor preview - use double selector for specificity */
.beezwoo-cs--editor-preview .beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--wide {
    min-height: var(--cs-masonry-wide-h, 200px) !important;
    height: var(--cs-masonry-wide-h, 200px) !important;
}

/* Preview Carousel layout */
.beezwoo-cs--editor-preview .beezwoo-cs__swiper {
    display: block !important;
    min-height: var(--cs-carousel-h, 400px) !important;
    /* Reset masonry properties */
    column-count: unset !important;
    column-gap: unset !important;
    /* Reset grid properties */
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__swiper .swiper-slide {
    height: var(--cs-carousel-h, 400px) !important;
    min-height: var(--cs-carousel-h, 400px) !important;
}
.beezwoo-cs--editor-preview .beezwoo-cs__swiper--aspect-ratio {
    min-height: auto !important;
}
.beezwoo-cs--editor-preview .beezwoo-cs__swiper--aspect-ratio .swiper-slide {
    height: auto !important;
    min-height: 0 !important;
}

.beezwoo-cs--editor-preview .beezwoo-cs__swiper .beezwoo-cs__card {
    height: 100% !important;
    min-height: 200px !important; /* Fallback */
    /* Reset masonry properties */
    break-inside: unset !important;
    margin-bottom: 0 !important;
}
.beezwoo-cs--editor-preview .beezwoo-cs__swiper--aspect-ratio .beezwoo-cs__card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--cs-carousel-aspect, 3/4) !important;
}

/* CRITICAL: Ensure masonry always displays correctly - desktop only */
@media (min-width: 1025px) {
    .beezwoo-cs--desktop-masonry .beezwoo-cs__masonry,
    .beezwoo-cs .beezwoo-cs__wrapper.beezwoo-cs__masonry {
        display: block !important;
        column-count: var(--cs-masonry-cols, 4) !important;
        column-gap: var(--cs-masonry-gap, 20px) !important;
        column-fill: balance;
    }

    .beezwoo-cs--desktop-masonry .beezwoo-cs__masonry .beezwoo-cs__card,
    .beezwoo-cs .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card {
        display: block !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
        margin-bottom: var(--cs-masonry-gap, 20px) !important;
        width: 100% !important;
        /* CRITICAL: Use both height AND min-height for consistent rendering */
        min-height: var(--cs-masonry-base-h, 280px) !important;
        height: var(--cs-masonry-base-h, 280px) !important;
    }

    .beezwoo-cs--desktop-masonry .beezwoo-cs__masonry .beezwoo-cs__card::before,
    .beezwoo-cs .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card::before {
        content: none !important;
        display: none !important;
        padding: 0 !important;
    }

    /* TALL cards - use .beezwoo-cs__card.beezwoo-cs__card--tall for higher specificity */
    .beezwoo-cs--desktop-masonry .beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--tall,
    .beezwoo-cs .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--tall {
        min-height: var(--cs-masonry-tall-h, 450px) !important;
        height: var(--cs-masonry-tall-h, 450px) !important;
    }

    /* WIDE cards - use .beezwoo-cs__card.beezwoo-cs__card--wide for higher specificity */
    .beezwoo-cs--desktop-masonry .beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--wide,
    .beezwoo-cs .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--wide {
        min-height: var(--cs-masonry-wide-h, 200px) !important;
        height: var(--cs-masonry-wide-h, 200px) !important;
    }
}

/* Responsive Masonry overrides - ensure tablet/mobile settings actually apply */
@media (max-width: 1024px) {
    /* Override inline desktop masonry vars so tablet settings actually apply */
    .beezwoo-cs {
        --cs-masonry-cols: var(--cs-tablet-masonry-cols, var(--cs-tablet-cols, 2)) !important;
        --cs-masonry-gap: var(--cs-tablet-gap, 15px) !important;
    }
}

@media (max-width: 767px) {
    /* Override inline desktop masonry vars so mobile settings actually apply */
    .beezwoo-cs {
        --cs-masonry-cols: var(--cs-mobile-masonry-cols, var(--cs-mobile-cols, 2)) !important;
        --cs-masonry-gap: var(--cs-mobile-gap, 10px) !important;

        /* Premium “editorial” masonry rhythm (avoid the “2-col grid” look) */
        --cs-masonry-base-h: var(--cs-mobile-masonry-base-h, clamp(var(--cs-mobile-card-min-h, 150px), 66vw, var(--cs-mobile-card-max-h, 380px))) !important;
        --cs-masonry-tall-h: var(--cs-mobile-masonry-tall-h, clamp(calc(var(--cs-mobile-card-min-h, 150px) + 90px), 92vw, calc(var(--cs-mobile-card-max-h, 380px) + 220px))) !important;
        --cs-masonry-wide-h: var(--cs-mobile-masonry-wide-h, clamp(var(--cs-mobile-card-min-h, 150px), 48vw, var(--cs-mobile-card-max-h, 380px))) !important;
    }
}

/* Premium masonry rhythm - tablet (3 cols, staggered heights) */
@media (min-width: 769px) and (max-width: 1024px) {
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry {
        column-count: var(--cs-tablet-masonry-cols, 3) !important;
        column-gap: clamp(14px, 2vw, 24px) !important;
        column-fill: balance;
    }

    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card {
        width: 100% !important;
        margin-bottom: clamp(14px, 2vw, 22px) !important;
        break-inside: avoid !important;
        min-height: clamp(260px, 34vw, 420px) !important;
        height: clamp(260px, 34vw, 420px) !important;
    }

    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(6n+1) {
        height: clamp(340px, 40vw, 520px) !important;
    }
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(6n+2) {
        height: clamp(260px, 30vw, 410px) !important;
    }
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(6n+3) {
        height: clamp(300px, 34vw, 460px) !important;
    }
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(6n+4) {
        height: clamp(380px, 44vw, 560px) !important;
    }
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(6n+5) {
        height: clamp(280px, 32vw, 430px) !important;
    }
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(6n+6) {
        height: clamp(320px, 38vw, 500px) !important;
    }

    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--tall {
        height: clamp(420px, 48vw, 600px) !important;
    }

    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--wide {
        height: clamp(260px, 32vw, 420px) !important;
    }

    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__image,
    .beezwoo-cs--tablet-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}

/* Premium masonry rhythm - mobile (2 cols, immediate staggering) */
@media (max-width: 768px) {
    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry {
        column-count: var(--cs-mobile-masonry-cols, 2) !important;
        column-gap: clamp(12px, 3vw, 18px) !important;
        column-fill: balance;
    }

    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card {
        width: 100% !important;
        margin: 0 0 clamp(12px, 3vw, 18px) 0 !important;
        break-inside: avoid !important;
        min-height: clamp(220px, 64vw, 420px) !important;
        height: clamp(260px, 70vw, 480px) !important;
    }

    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(4n+1) {
        height: clamp(360px, 78vw, 540px) !important;
    }
    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(4n+2) {
        height: clamp(240px, 58vw, 400px) !important;
    }
    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(4n+3) {
        height: clamp(300px, 70vw, 460px) !important;
    }
    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card:not(.beezwoo-cs__card--tall):not(.beezwoo-cs__card--wide):nth-child(4n+4) {
        height: clamp(330px, 76vw, 500px) !important;
    }

    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--tall {
        height: clamp(380px, 84vw, 560px) !important;
    }

    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__card.beezwoo-cs__card--wide {
        height: clamp(250px, 60vw, 420px) !important;
    }

    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__image,
    .beezwoo-cs--mobile-masonry .beezwoo-cs__wrapper.beezwoo-cs__masonry .beezwoo-cs__video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}

/* Hide badge on frontend */
.beezwoo-cs:not(.beezwoo-cs--editor-preview) .beezwoo-cs__editor-badge {
    display: none !important;
}

/* Elementor responsive preview mode */
.elementor-device-tablet .beezwoo-cs--editor-preview .beezwoo-cs__magazine-row {
    flex-wrap: wrap !important;
}

.elementor-device-mobile .beezwoo-cs--editor-preview .beezwoo-cs__magazine-row {
    flex-direction: column !important;
}

.elementor-device-mobile .beezwoo-cs--editor-preview .beezwoo-cs__bento {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    height: auto !important;
}

.elementor-device-mobile .beezwoo-cs--editor-preview .beezwoo-cs__bento .beezwoo-cs__card {
    grid-area: auto !important;
    min-height: 200px !important;
}

/* MASONRY Elementor mobile preview */
.elementor-device-mobile .beezwoo-cs--editor-preview {
    --cs-masonry-cols: var(--cs-mobile-masonry-cols, var(--cs-mobile-cols, 2)) !important;
    --cs-masonry-gap: var(--cs-mobile-gap, 10px) !important;

    /* Keep preview consistent with frontend premium mobile masonry */
    --cs-masonry-base-h: var(--cs-mobile-masonry-base-h, clamp(var(--cs-mobile-card-min-h, 150px), 66vw, var(--cs-mobile-card-max-h, 380px))) !important;
    --cs-masonry-tall-h: var(--cs-mobile-masonry-tall-h, clamp(calc(var(--cs-mobile-card-min-h, 150px) + 90px), 92vw, calc(var(--cs-mobile-card-max-h, 380px) + 220px))) !important;
    --cs-masonry-wide-h: var(--cs-mobile-masonry-wide-h, clamp(var(--cs-mobile-card-min-h, 150px), 48vw, var(--cs-mobile-card-max-h, 380px))) !important;
}

.elementor-device-mobile .beezwoo-cs--editor-preview .beezwoo-cs__masonry {
    column-count: var(--cs-mobile-masonry-cols, var(--cs-mobile-cols, 2)) !important;
    column-gap: var(--cs-mobile-gap, 10px) !important;
}

/* GRID Elementor mobile preview */
.elementor-device-mobile .beezwoo-cs--editor-preview .beezwoo-cs__grid {
    grid-template-columns: repeat(var(--cs-mobile-cols, 2), 1fr) !important;
    gap: var(--cs-mobile-gap, 10px) !important;
}

/* ==========================================================================
   ELEMENTOR MOBILE MODES - CRITICAL for preview
   These rules apply the mobile modes in Elementor's responsive preview
   ========================================================================== */

/* --- STORIES MODE in Elementor Mobile Preview --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;
    column-count: unset !important;
    height: var(--cs-mobile-h, 70vh) !important;
    min-height: 350px;
    scrollbar-width: none;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__wrapper::-webkit-scrollbar {
    display: none;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__magazine-row,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__magazine-big,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__magazine-small {
    display: contents !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__card {
    flex: 0 0 calc(100% - 20px) !important;
    width: calc(100% - 20px) !important;
    height: 100% !important;
    min-height: 100% !important;
    scroll-snap-align: center;
    border-radius: 16px !important;
    grid-area: unset !important;
    margin: 0 10px !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__card::before {
    display: none !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stories .beezwoo-cs__card::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 3px;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
    z-index: 20;
}

/* --- TINDER MODE in Elementor Mobile Preview --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__wrapper {
    position: relative !important;
    height: var(--cs-mobile-h, 70vh) !important;
    min-height: 350px;
    display: block !important;
    column-count: unset !important;
    overflow: visible !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__magazine-row,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__magazine-big,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__magazine-small {
    display: contents !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__card {
    position: absolute !important;
    top: 10px !important;
    left: 5% !important;
    right: 5% !important;
    bottom: 10px !important;
    width: 90% !important;
    height: calc(100% - 20px) !important;
    min-height: 0 !important;
    grid-area: unset !important;
    transform-origin: bottom center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 20px !important;
    margin: 0 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__card::before {
    display: none !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(n+4) {
    display: none !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(3) {
    transform: scale(0.88) translateY(-30px);
    opacity: 0.5;
    z-index: 1;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(2) {
    transform: scale(0.94) translateY(-15px);
    opacity: 0.75;
    z-index: 2;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-tinder .beezwoo-cs__card:nth-child(1) {
    transform: scale(1) translateY(0);
    opacity: 1;
    z-index: 3;
}

/* --- FULLSCREEN MODE in Elementor Mobile Preview --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: y mandatory;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: var(--cs-mobile-h, 70vh) !important;
    max-height: var(--cs-mobile-h, 70vh) !important;
    gap: 0 !important;
    column-count: unset !important;
    scrollbar-width: none;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__wrapper::-webkit-scrollbar {
    display: none;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__magazine-row,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__magazine-big,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__magazine-small {
    display: contents !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    scroll-snap-align: start;
    border-radius: 0 !important;
    grid-area: unset !important;
    margin: 0 !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-fullscreen .beezwoo-cs__card::before {
    display: none !important;
}

/* --- STACK MODE in Elementor Mobile Preview --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__wrapper {
    position: relative !important;
    height: var(--cs-mobile-h, 70vh) !important;
    min-height: 350px;
    display: block !important;
    column-count: unset !important;
    perspective: 1000px;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__magazine-row,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__magazine-big,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__magazine-small {
    display: contents !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-area: unset !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    transform-style: preserve-3d;
    border-radius: 20px !important;
    margin: 0 !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__card::before {
    display: none !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(n+4) {
    display: none !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(3) {
    transform: translateZ(-40px) scale(0.92);
    opacity: 0.4;
    z-index: 1;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(2) {
    transform: translateZ(-20px) scale(0.96);
    opacity: 0.7;
    z-index: 2;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-stack .beezwoo-cs__card:nth-child(1) {
    transform: translateZ(0) scale(1);
    opacity: 1;
    z-index: 3;
}

/* --- CAROUSEL MODE in Elementor Mobile Preview --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper:not(.swiper) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--cs-mobile-carousel-space, 10px) !important;
    column-count: unset !important;
    padding: 10px 0;
    scrollbar-width: none;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__wrapper:not(.swiper)::-webkit-scrollbar {
    display: none;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__magazine-row,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__magazine-big,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__magazine-small {
    display: contents !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__card {
    flex: 0 0 80% !important;
    width: 80% !important;
    max-width: 80% !important;
    min-height: var(--cs-mobile-carousel-h, 280px) !important;
    height: var(--cs-mobile-carousel-h, 280px) !important;
    scroll-snap-align: center;
    grid-area: unset !important;
    margin: 0 !important;
    border-radius: 16px !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-carousel .beezwoo-cs__card::before {
    display: none !important;
}

/* --- GRID MODE in Elementor Mobile Preview --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-grid .beezwoo-cs__wrapper {
    display: grid !important;
    grid-template-columns: repeat(var(--cs-mobile-cols, 2), 1fr) !important;
    gap: var(--cs-mobile-gap, 10px) !important;
    column-count: unset !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-grid .beezwoo-cs__magazine-row,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-grid .beezwoo-cs__magazine-big,
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-grid .beezwoo-cs__magazine-small {
    display: contents !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-grid .beezwoo-cs__card {
    min-height: var(--cs-mobile-card-min-h, 150px) !important;
    height: auto !important;
    grid-area: unset !important;
    margin: 0 !important;
    aspect-ratio: 3/4;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-grid .beezwoo-cs__card::before {
    display: none !important;
}

/* --- INHERIT MODE in Elementor Mobile Preview (uses desktop layout but with mobile sizing) --- */
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-inherit .beezwoo-cs__grid {
    grid-template-columns: repeat(var(--cs-mobile-cols, 2), 1fr) !important;
    gap: var(--cs-mobile-gap, 10px) !important;
}
.elementor-device-mobile .beezwoo-cs--editor-preview.beezwoo-cs--mobile-inherit .beezwoo-cs__grid .beezwoo-cs__card {
    min-height: var(--cs-mobile-card-min-h, 150px) !important;
}

/* ==========================================================================
   ENTERPRISE ANIMATIONS - v3.0.0
   ========================================================================== */

/* Entrance Animations */
.beezwoo-cs--anim-fade-in .beezwoo-cs__card {
    opacity: 0;
    animation: beezwoo-fade-in var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-fade-up .beezwoo-cs__card {
    opacity: 0;
    transform: translateY(30px);
    animation: beezwoo-fade-up var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-fade-down .beezwoo-cs__card {
    opacity: 0;
    transform: translateY(-30px);
    animation: beezwoo-fade-down var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-zoom-in .beezwoo-cs__card {
    opacity: 0;
    transform: scale(0.9);
    animation: beezwoo-zoom-in var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-fade-left .beezwoo-cs__card {
    opacity: 0;
    transform: translateX(-30px);
    animation: beezwoo-fade-left var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-fade-right .beezwoo-cs__card {
    opacity: 0;
    transform: translateX(30px);
    animation: beezwoo-fade-right var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-zoom-out .beezwoo-cs__card {
    opacity: 0;
    transform: scale(1.1);
    animation: beezwoo-zoom-out var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-flip-up .beezwoo-cs__card {
    opacity: 0;
    transform: perspective(800px) rotateX(90deg);
    transform-origin: bottom center;
    animation: beezwoo-flip-up var(--cs-entrance-duration, 600ms) ease-out forwards;
}

.beezwoo-cs--anim-flip-down .beezwoo-cs__card {
    opacity: 0;
    transform: perspective(800px) rotateX(-90deg);
    transform-origin: top center;
    animation: beezwoo-flip-down var(--cs-entrance-duration, 600ms) ease-out forwards;
}

/* Stagger Animation Delays */
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(1) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 0); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(2) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 1); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(3) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 2); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(4) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 3); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(5) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 4); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(6) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 5); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(7) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 6); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(8) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 7); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(9) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 8); }
.beezwoo-cs--stagger .beezwoo-cs__card:nth-child(10) { animation-delay: calc(var(--cs-stagger-delay, 100ms) * 9); }

/* Keyframes */
@keyframes beezwoo-fade-in {
    to { opacity: 1; }
}

@keyframes beezwoo-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes beezwoo-fade-down {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes beezwoo-zoom-in {
    to { opacity: 1; transform: scale(1); }
}

@keyframes beezwoo-fade-left {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes beezwoo-fade-right {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes beezwoo-zoom-out {
    to { opacity: 1; transform: scale(1); }
}

@keyframes beezwoo-flip-up {
    to { opacity: 1; transform: perspective(800px) rotateX(0); }
}

@keyframes beezwoo-flip-down {
    to { opacity: 1; transform: perspective(800px) rotateX(0); }
}

/* Hover Effects */
.beezwoo-cs--hover-zoom .beezwoo-cs__card:hover .beezwoo-cs__image {
    transform: scale(var(--cs-hover-scale, 1.08));
}

.beezwoo-cs--hover-lift .beezwoo-cs__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.beezwoo-cs--hover-glow .beezwoo-cs__card:hover {
    box-shadow: 0 0 30px rgba(212, 164, 132, 0.4);
}

.beezwoo-cs--hover-shine .beezwoo-cs__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    z-index: 10;
    transition: left 0.6s ease;
    pointer-events: none;
}
.beezwoo-cs--hover-shine .beezwoo-cs__card:hover::before {
    left: 100%;
}

/* Tilt 3D */
.beezwoo-cs--hover-tilt .beezwoo-cs__card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.beezwoo-cs--hover-tilt .beezwoo-cs__card:hover {
    transform: rotateX(5deg) rotateY(-5deg);
}

/* Ken Burns Effect */
.beezwoo-cs--image-ken-burns .beezwoo-cs__image {
    animation: beezwoo-ken-burns 20s ease-in-out infinite alternate;
}

@keyframes beezwoo-ken-burns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, -1%); }
}

/* Image Blur Reveal */
.beezwoo-cs--image-blur-reveal .beezwoo-cs__image {
    filter: blur(10px);
    animation: beezwoo-blur-reveal 1s ease-out forwards;
}

@keyframes beezwoo-blur-reveal {
    to { filter: blur(0); }
}

/* ==========================================================================
   RESPONSIVE ASPECT RATIOS - Per Breakpoint Override
   ========================================================================== */

/* Desktop Aspect Ratio Override */
.beezwoo-cs[data-desktop-aspect="auto"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: auto !important; }
.beezwoo-cs[data-desktop-aspect="9/16"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 9/16 !important; }
.beezwoo-cs[data-desktop-aspect="4/5"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 4/5 !important; }
.beezwoo-cs[data-desktop-aspect="3/4"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 3/4 !important; }
.beezwoo-cs[data-desktop-aspect="2/3"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 2/3 !important; }
.beezwoo-cs[data-desktop-aspect="1/1"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 1/1 !important; }
.beezwoo-cs[data-desktop-aspect="4/3"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 4/3 !important; }
.beezwoo-cs[data-desktop-aspect="3/2"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 3/2 !important; }
.beezwoo-cs[data-desktop-aspect="16/9"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 16/9 !important; }
.beezwoo-cs[data-desktop-aspect="21/9"] .beezwoo-cs__grid .beezwoo-cs__card { aspect-ratio: 21/9 !important; }

/* Tablet Aspect Ratio Override */
@media (max-width: 1024px) {
    .beezwoo-cs[data-tablet-aspect="9/16"] .beezwoo-cs__card { aspect-ratio: 9/16 !important; }
    .beezwoo-cs[data-tablet-aspect="4/5"] .beezwoo-cs__card { aspect-ratio: 4/5 !important; }
    .beezwoo-cs[data-tablet-aspect="3/4"] .beezwoo-cs__card { aspect-ratio: 3/4 !important; }
    .beezwoo-cs[data-tablet-aspect="2/3"] .beezwoo-cs__card { aspect-ratio: 2/3 !important; }
    .beezwoo-cs[data-tablet-aspect="1/1"] .beezwoo-cs__card { aspect-ratio: 1/1 !important; }
    .beezwoo-cs[data-tablet-aspect="4/3"] .beezwoo-cs__card { aspect-ratio: 4/3 !important; }
    .beezwoo-cs[data-tablet-aspect="3/2"] .beezwoo-cs__card { aspect-ratio: 3/2 !important; }
    .beezwoo-cs[data-tablet-aspect="16/9"] .beezwoo-cs__card { aspect-ratio: 16/9 !important; }
    .beezwoo-cs[data-tablet-aspect="21/9"] .beezwoo-cs__card { aspect-ratio: 21/9 !important; }
}

/* Mobile Aspect Ratio Override */
@media (max-width: 767px) {
    .beezwoo-cs[data-mobile-aspect="9/16"] .beezwoo-cs__card { aspect-ratio: 9/16 !important; }
    .beezwoo-cs[data-mobile-aspect="4/5"] .beezwoo-cs__card { aspect-ratio: 4/5 !important; }
    .beezwoo-cs[data-mobile-aspect="3/4"] .beezwoo-cs__card { aspect-ratio: 3/4 !important; }
    .beezwoo-cs[data-mobile-aspect="2/3"] .beezwoo-cs__card { aspect-ratio: 2/3 !important; }
    .beezwoo-cs[data-mobile-aspect="1/1"] .beezwoo-cs__card { aspect-ratio: 1/1 !important; }
    .beezwoo-cs[data-mobile-aspect="4/3"] .beezwoo-cs__card { aspect-ratio: 4/3 !important; }
    .beezwoo-cs[data-mobile-aspect="3/2"] .beezwoo-cs__card { aspect-ratio: 3/2 !important; }
    .beezwoo-cs[data-mobile-aspect="16/9"] .beezwoo-cs__card { aspect-ratio: 16/9 !important; }
    .beezwoo-cs[data-mobile-aspect="21/9"] .beezwoo-cs__card { aspect-ratio: 21/9 !important; }
}

/* ==========================================================================
   CAROUSEL ENTERPRISE ENHANCEMENTS
   ========================================================================== */

/* Arrows Styles */
.beezwoo-cs__swiper--arrows-minimal .swiper-button-prev,
.beezwoo-cs__swiper--arrows-minimal .swiper-button-next {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
}

.beezwoo-cs__swiper--arrows-circle .swiper-button-prev,
.beezwoo-cs__swiper--arrows-circle .swiper-button-next {
    border-radius: 50% !important;
}

.beezwoo-cs__swiper--arrows-square .swiper-button-prev,
.beezwoo-cs__swiper--arrows-square .swiper-button-next {
    border-radius: 0 !important;
}

.beezwoo-cs__swiper--arrows-rounded .swiper-button-prev,
.beezwoo-cs__swiper--arrows-rounded .swiper-button-next {
    border-radius: 8px !important;
}

.beezwoo-cs__swiper--arrows-pill .swiper-button-prev,
.beezwoo-cs__swiper--arrows-pill .swiper-button-next {
    border-radius: 30px !important;
    padding: 10px 20px !important;
}

/* Arrows Hover Only */
.beezwoo-cs__swiper--arrows-hover .swiper-button-prev,
.beezwoo-cs__swiper--arrows-hover .swiper-button-next {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.beezwoo-cs__swiper--arrows-hover:hover .swiper-button-prev,
.beezwoo-cs__swiper--arrows-hover:hover .swiper-button-next {
    opacity: 1;
}

/* Arrows Position Outside */
.beezwoo-cs__swiper--arrows-outside {
    padding: 0 50px;
}
.beezwoo-cs__swiper--arrows-outside .swiper-button-prev { left: 0; }
.beezwoo-cs__swiper--arrows-outside .swiper-button-next { right: 0; }

/* Arrows Position Bottom */
.beezwoo-cs__swiper--arrows-bottom .swiper-button-prev,
.beezwoo-cs__swiper--arrows-bottom .swiper-button-next {
    top: auto;
    bottom: 20px;
}
.beezwoo-cs__swiper--arrows-bottom .swiper-button-prev { left: calc(50% - 60px); }
.beezwoo-cs__swiper--arrows-bottom .swiper-button-next { right: calc(50% - 60px); }

/* Arrows Position Bottom Right */
.beezwoo-cs__swiper--arrows-bottom-right .swiper-button-prev,
.beezwoo-cs__swiper--arrows-bottom-right .swiper-button-next {
    top: auto !important;
    bottom: 20px !important;
    left: auto !important;
}
.beezwoo-cs__swiper--arrows-bottom-right .swiper-button-next { right: 20px !important; }
.beezwoo-cs__swiper--arrows-bottom-right .swiper-button-prev { right: 80px !important; }

/* Dynamic Bullets */
.beezwoo-cs__swiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(0.6);
}
.beezwoo-cs__swiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.beezwoo-cs__swiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(0.8);
}
.beezwoo-cs__swiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1);
}

/* Scrollbar Styling */
.beezwoo-cs__swiper .swiper-scrollbar {
    background: rgba(0,0,0,0.1);
    height: 4px;
    border-radius: 4px;
}
.beezwoo-cs__swiper .swiper-scrollbar-drag {
    background: var(--cs-arrows-bg, rgba(0,0,0,0.5));
    border-radius: 4px;
}

/* Carousel Overflow Visible */
.beezwoo-cs__swiper--overflow-visible {
    overflow: visible !important;
}
.beezwoo-cs__swiper--overflow-visible .swiper-wrapper {
    overflow: visible !important;
}

/* Grab Cursor */
.beezwoo-cs__swiper--grab-cursor {
    cursor: grab;
}
.beezwoo-cs__swiper--grab-cursor:active {
    cursor: grabbing;
}

/* ==========================================================================
   2026 FASHION EFFECTS - ENTERPRISE GRADE PREMIUM
   Modern, innovative effects for high-end fashion e-commerce
   ========================================================================== */

/* -------------------------------------------
   HOVER EFFECT: Parallax Depth
   Creates a subtle 3D parallax movement
   ------------------------------------------- */
.beezwoo-cs--hover-parallax .beezwoo-cs__card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.beezwoo-cs--hover-parallax .beezwoo-cs__media {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.beezwoo-cs--hover-parallax .beezwoo-cs__content {
    transform: translateZ(30px);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.beezwoo-cs--hover-parallax .beezwoo-cs__card:hover .beezwoo-cs__media {
    transform: scale(1.05) translateZ(-20px);
}

.beezwoo-cs--hover-parallax .beezwoo-cs__card:hover .beezwoo-cs__content {
    transform: translateZ(50px);
}

/* -------------------------------------------
   HOVER EFFECT: Reveal Slide
   Content slides up revealing more info
   ------------------------------------------- */
.beezwoo-cs--hover-reveal .beezwoo-cs__content {
    transform: translateY(calc(100% - 60px));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    padding: 30px 20px;
}

.beezwoo-cs--hover-reveal .beezwoo-cs__card:hover .beezwoo-cs__content {
    transform: translateY(0);
}

.beezwoo-cs--hover-reveal .beezwoo-cs__overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.beezwoo-cs--hover-reveal .beezwoo-cs__card:hover .beezwoo-cs__overlay {
    opacity: 1;
}

/* -------------------------------------------
   HOVER EFFECT: Magnetic
   Card follows cursor with magnetic effect
   ------------------------------------------- */
.beezwoo-cs--hover-magnetic .beezwoo-cs__card {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}

.beezwoo-cs--hover-magnetic .beezwoo-cs__card:hover {
    transform: translateY(-5px) rotateX(var(--mouse-y, 0deg)) rotateY(var(--mouse-x, 0deg));
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------
   HOVER EFFECT: Morph Border
   Animated border morphing effect
   ------------------------------------------- */
.beezwoo-cs--hover-morph .beezwoo-cs__card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #D4A484, #8B7355, #C9B8A8, #5C4033);
    background-size: 400% 400%;
    border-radius: calc(var(--cs-radius, 12px) + 3px);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: beezwoo-morph-gradient 4s ease infinite;
}

.beezwoo-cs--hover-morph .beezwoo-cs__card:hover::before {
    opacity: 1;
}

@keyframes beezwoo-morph-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* -------------------------------------------
   HOVER EFFECT: Neon Glow
   Subtle neon glow on hover
   ------------------------------------------- */
.beezwoo-cs--hover-neon .beezwoo-cs__card {
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.beezwoo-cs--hover-neon .beezwoo-cs__card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 20px rgba(212, 164, 132, 0.4),
        0 0 40px rgba(212, 164, 132, 0.2),
        0 0 60px rgba(212, 164, 132, 0.1);
}

/* -------------------------------------------
   HOVER EFFECT: Split Reveal
   Image splits to reveal content
   ------------------------------------------- */
.beezwoo-cs--hover-split .beezwoo-cs__media::before,
.beezwoo-cs--hover-split .beezwoo-cs__media::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: inherit;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}

.beezwoo-cs--hover-split .beezwoo-cs__media::before {
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.beezwoo-cs--hover-split .beezwoo-cs__media::after {
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.beezwoo-cs--hover-split .beezwoo-cs__card:hover .beezwoo-cs__media::before {
    transform: translateX(-100%);
}

.beezwoo-cs--hover-split .beezwoo-cs__card:hover .beezwoo-cs__media::after {
    transform: translateX(100%);
}

.beezwoo-cs--hover-split .beezwoo-cs__content {
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.beezwoo-cs--hover-split .beezwoo-cs__card:hover .beezwoo-cs__content {
    opacity: 1;
}

/* -------------------------------------------
   HOVER EFFECT: Glitch
   Modern glitch effect for edgy fashion
   ------------------------------------------- */
.beezwoo-cs--hover-glitch .beezwoo-cs__card:hover .beezwoo-cs__image {
    animation: beezwoo-glitch 0.3s ease;
}

@keyframes beezwoo-glitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(-2px, -2px); filter: hue-rotate(180deg); }
    60% { transform: translate(2px, 2px); filter: hue-rotate(270deg); }
    80% { transform: translate(2px, -2px); filter: hue-rotate(360deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* -------------------------------------------
   ENTRANCE ANIMATION: Cascade
   Cards cascade in from different directions
   ------------------------------------------- */
.beezwoo-cs--anim-cascade .beezwoo-cs__card {
    opacity: 0;
    animation: beezwoo-cascade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.beezwoo-cs--anim-cascade .beezwoo-cs__card:nth-child(odd) {
    transform: translateX(-50px) rotate(-5deg);
}

.beezwoo-cs--anim-cascade .beezwoo-cs__card:nth-child(even) {
    transform: translateX(50px) rotate(5deg);
}

@keyframes beezwoo-cascade {
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* -------------------------------------------
   ENTRANCE ANIMATION: Blur Reveal
   Cards fade in with blur effect
   ------------------------------------------- */
.beezwoo-cs--anim-blur-reveal .beezwoo-cs__card {
    opacity: 0;
    filter: blur(20px);
    transform: scale(0.95);
    animation: beezwoo-blur-reveal-card 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes beezwoo-blur-reveal-card {
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* -------------------------------------------
   ENTRANCE ANIMATION: Flip In
   Cards flip in from 3D space
   ------------------------------------------- */
.beezwoo-cs--anim-flip .beezwoo-cs__card {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
    transform-origin: left center;
    animation: beezwoo-flip-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes beezwoo-flip-in {
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}

/* -------------------------------------------
   ENTRANCE ANIMATION: Wave
   Cards wave in like a cloth
   ------------------------------------------- */
.beezwoo-cs--anim-wave .beezwoo-cs__card {
    opacity: 0;
    transform: translateY(100px) scaleY(0.8);
    animation: beezwoo-wave-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes beezwoo-wave-in {
    50% { transform: translateY(-20px) scaleY(1.05); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* -------------------------------------------
   PRESET: Aurora 2026
   Animated aurora gradient overlay
   ------------------------------------------- */
.beezwoo-cs--preset-aurora .beezwoo-cs__overlay {
    background: linear-gradient(
        135deg,
        rgba(120, 119, 198, 0.3) 0%,
        rgba(212, 164, 132, 0.3) 25%,
        rgba(139, 115, 85, 0.3) 50%,
        rgba(92, 64, 51, 0.3) 75%,
        rgba(120, 119, 198, 0.3) 100%
    );
    background-size: 400% 400%;
    animation: beezwoo-aurora 8s ease infinite;
    opacity: 0.7 !important;
}

@keyframes beezwoo-aurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.beezwoo-cs--preset-aurora .beezwoo-cs__title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------
   PRESET: Glassmorphism 2026
   Modern frosted glass effect
   ------------------------------------------- */
.beezwoo-cs--preset-glassmorphism .beezwoo-cs__content {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    margin: 16px;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.beezwoo-cs--preset-glassmorphism .beezwoo-cs__overlay {
    display: none;
}

/* -------------------------------------------
   PRESET: Brutalist 2026
   Bold, raw aesthetic
   ------------------------------------------- */
.beezwoo-cs--preset-brutalist .beezwoo-cs__card {
    border-radius: 0 !important;
    border: 3px solid #000;
}

.beezwoo-cs--preset-brutalist .beezwoo-cs__title {
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
}

.beezwoo-cs--preset-brutalist .beezwoo-cs__content {
    background: #fff;
    color: #000;
    padding: 15px;
    margin: 10px;
}

.beezwoo-cs--preset-brutalist .beezwoo-cs__title {
    color: #000;
    text-shadow: none;
}

/* -------------------------------------------
   PRESET: Neomorphism
   Soft 3D effect
   ------------------------------------------- */
.beezwoo-cs--preset-neomorphism .beezwoo-cs__card {
    background: #e0e5ec;
    box-shadow:
        8px 8px 16px #b8bcc2,
        -8px -8px 16px #ffffff;
    border: none;
}

.beezwoo-cs--preset-neomorphism .beezwoo-cs__card:hover {
    box-shadow:
        inset 4px 4px 8px #b8bcc2,
        inset -4px -4px 8px #ffffff;
}

.beezwoo-cs--preset-neomorphism .beezwoo-cs__content {
    background: transparent;
}

.beezwoo-cs--preset-neomorphism .beezwoo-cs__title {
    color: #333;
}

/* -------------------------------------------
   PRESET: Luxury Gold
   High-end luxury aesthetic
   ------------------------------------------- */
.beezwoo-cs--preset-luxury-gold .beezwoo-cs__card {
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.beezwoo-cs--preset-luxury-gold .beezwoo-cs__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.1) 0%,
        transparent 50%,
        rgba(212, 175, 55, 0.1) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.beezwoo-cs--preset-luxury-gold .beezwoo-cs__title {
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 14px;
    background: linear-gradient(135deg, #D4AF37 0%, #F5E7A3 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.beezwoo-cs--preset-luxury-gold .beezwoo-cs__card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}

/* -------------------------------------------
   IMAGE EFFECT: Duotone
   Two-tone color overlay
   ------------------------------------------- */
.beezwoo-cs--image-duotone .beezwoo-cs__image {
    filter: grayscale(100%);
}

.beezwoo-cs--image-duotone .beezwoo-cs__media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #D4A484 0%, #1A1A1A 100%);
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 1;
}

/* -------------------------------------------
   IMAGE EFFECT: Grain
   Film grain texture
   ------------------------------------------- */
.beezwoo-cs--image-grain .beezwoo-cs__media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

/* -------------------------------------------
   IMAGE EFFECT: Vignette
   Cinematic vignette
   ------------------------------------------- */
.beezwoo-cs--image-vignette .beezwoo-cs__media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

/* -------------------------------------------
   MOBILE EFFECT: Scroll Parallax
   Parallax on scroll for mobile
   ------------------------------------------- */
@media (max-width: 767px) {
    .beezwoo-cs--mobile-parallax .beezwoo-cs__image {
        height: 120%;
        top: -10%;
    }
}

/* -------------------------------------------
   LOADING SKELETON
   Premium loading state
   ------------------------------------------- */
.beezwoo-cs--loading .beezwoo-cs__card {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: beezwoo-skeleton 1.5s ease-in-out infinite;
}

@keyframes beezwoo-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* -------------------------------------------
   INTERACTION: Focus Ring
   Accessible focus indicator
   ------------------------------------------- */
.beezwoo-cs__card:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(212, 164, 132, 0.5),
        0 0 0 6px rgba(212, 164, 132, 0.2);
}

/* -------------------------------------------
   PRINT STYLES
   ------------------------------------------- */
@media print {
    .beezwoo-cs__card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .beezwoo-cs__video,
    .beezwoo-cs__swiper .swiper-button-prev,
    .beezwoo-cs__swiper .swiper-button-next,
    .beezwoo-cs__swiper .swiper-pagination {
        display: none !important;
    }
}

/* ==========================================================================
   ELEMENTOR ADMIN - Sortable Placeholder
   ========================================================================== */
.beezwoo-sortable-placeholder {
    background: #e3f2fd !important;
    border: 2px dashed #2196f3 !important;
    height: 30px !important;
    margin: 4px !important;
    display: inline-block !important;
    vertical-align: top !important;
}