/* =========================================================
   1. HERO CONTAINER (Base + Top Left Pink Glow)
========================================================= */

.sbx-hero {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 24px;
    min-height: 330px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: center;
    gap: 48px;
    padding: 56px 64px;
    border: 1px solid var(--sbx-border);
    border-radius: 30px;
    
    /* 
      Restored the exact pink static glow you liked on the top left (8% 14%). 
      The linear-gradient is your original light base. 
    */
    background: 
        radial-gradient(circle at 8% 14%, rgba(236, 63, 122, .13), transparent 34%),
        linear-gradient(135deg, #fff7fb 0%, #f7f2ff 50%, #f4fbff 100%);
        
    box-shadow: 0 22px 60px rgba(19,8,47,.09);
    
    /* Required to contain the animated purple orb */
    position: relative;
    overflow: hidden;
    isolation: isolate; 
}

/* =========================================================
   2. ANIMATED PURPLE PLASMA (Desktop: Right Side)
========================================================= */

.sbx-hero::before {
    content: "";
    position: absolute;
    
    /* Positioned on the right side */
    top: 10%;
    right: 0%;
    
    width: 450px;
    height: 450px;
    
    /* The Purple Color from your original code, slightly faded for a light background */
    background: rgba(109, 40, 217, 0.15); 
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
    
    /* Clean, premium fast orbit */
    -webkit-animation: heroFastOrbit 3s linear infinite !important;
    animation: heroFastOrbit 3s linear infinite !important;
}

/* =========================================================
   3. MOBILE SYSTEM (Moves Purple to the Bottom)
========================================================= */

@media (max-width: 1023px) {
    .sbx-hero::before {
        /* Remove desktop positioning */
        top: auto; 
        right: auto;
        
        /* Anchor to the bottom center */
        bottom: -60px; 
        left: 10%;
        
        /* Turn the massive circle into a sleek, wide bottom strip */
        width: 80%; 
        height: 150px; 
        border-radius: 100px;
    }
}

/* =========================================================
   4. FAST ORBIT KEYFRAMES
========================================================= */

/* Keeps the glowing orb moving in a tight, professional circle */

@-webkit-keyframes heroFastOrbit {
    0%   { -webkit-transform: rotate(0deg) translateX(60px) rotate(0deg); }
    100% { -webkit-transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

@keyframes heroFastOrbit {
    0%   { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

.sbx-hero-content{
    min-width:0;
    max-width:720px;
}

.sbx-hero-kicker{
    display:inline-flex;
    align-items:center;
	gap: 6px;
    width:max-content;
    margin-bottom:18px;
    padding:8px 15px;
    border-radius:999px;
    background:rgba(236,63,122,.12);
    color:var(--sbx-pink);
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}



.sbx-kicker-icon {
    width: 14px;
    height: 14px;
    /* Glides smoothly back and forth towards the text */
    animation: gentleScan 4s ease-in-out infinite;
}

.sbx-kicker-icon circle {
    /* The circumference of r="8" is ~50.26. 
       This creates a solid line of 38px, and a gap of 12.26px. */
    stroke-dasharray: 38 12.26;
    stroke-linecap: round;
    /* Linear animation makes the gap seamlessly orbit the circle */
    animation: orbitRim 1.5s linear infinite;
}

/* The handle remains solid for visual stability */
.sbx-kicker-icon line {
    opacity: 0.8;
}

/* --- Keyframes --- */

@keyframes orbitRim {
    from {
        /* Starts exactly one full rotation away */
        stroke-dashoffset: 50.26; 
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes gentleScan {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    50% {
        /* Moves 3px toward the text and very slightly magnifies */
        transform: translateX(3px) scale(1.08); 
    }
}





/* =========================================================
   1. DESKTOP (Normal Layout - Plenty of space)
========================================================= */

.sbx-hero {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 24px;
    min-height: 330px;
    display: grid;
    /* Normal 2 columns: Content on left, Image on right */
    grid-template-columns: minmax(0, 1fr) 430px; 
    align-items: center;
    gap: 48px;
    padding: 56px 64px;
    border: 1px solid var(--sbx-border);
    border-radius: 30px;
    
    background: 
        radial-gradient(circle at 8% 14%, rgba(236, 63, 122, .13), transparent 34%),
        linear-gradient(135deg, #fff7fb 0%, #f7f2ff 50%, #f4fbff 100%);
        
    box-shadow: 0 22px 60px rgba(19,8,47,.09);
    position: relative;
    overflow: hidden;
    isolation: isolate; 
}

.sbx-hero-content {
    /* Normal block container for desktop */
    display: block; 
    min-width: 0;
    max-width: 720px;
}

.sbx-hero h1 {
    margin: 0;
    color: var(--sbx-purple-dark);
    font-size: clamp(42px, 4.2vw, 66px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -.045em;
    
    /* THE LOCK: Keeps it exactly on 2 lines EVERYWHERE */
    white-space: nowrap; 
}

.sbx-hero h1 span {
    color: var(--sbx-purple);
}

.sbx-hero p {
    max-width: 650px;
    margin: 24px 0 0;
    color: var(--sbx-text);
    font-size: 17px;
    line-height: 1.85;
    font-weight: 650;
}

.sbx-hero-art {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    min-width: 0;
    width: 100%;
}

.sbx-hero-art img {
    width: 100%;
    max-width: 430px; 
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 34px rgba(109, 40, 217, .18)); 
}

/* =========================================================
   TABLET: 50/50 Split (Text Left, Faded Image Right)
========================================================= */

@media (max-width: 1024px) {
    .sbx-hero {
        display: flex;
        align-items: center;
        position: relative;
        padding: 48px 42px;
        text-align: left;
        overflow: hidden;
    }

    /* 1. TEXT TAKES HALF: Locks all text to the left 55% of the screen */
    .sbx-hero-content {
        display: block !important; 
        width: 55% !important; 
        position: relative;
        z-index: 2; 
    }

    /* Strip out desktop grid coordinates */
    .sbx-hero-kicker, 
    .sbx-hero h1, 
    .sbx-hero p, 
    .sbx-hero-art {
        grid-column: auto;
        grid-row: auto;
    }

    .sbx-hero-kicker {
        margin-bottom: 16px !important;
    }

    .sbx-hero h1 {
        /* Safely scales text down so the 2 lines fit perfectly in their 55% half */
        font-size: clamp(24px, 4vw, 42px); 
        white-space: nowrap;
    }

    .sbx-hero p {
        margin-top: 18px !important;
        margin-bottom: 0 !important;
        font-size: 15px !important;
        max-width: 100% !important;
    }

    /* 2. IMAGE TAKES HALF: Pinned strictly to the right side */
    .sbx-hero-art {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important; /* Centers it perfectly vertically */
        
        width: 40% !important; /* Takes up the remaining right side */
        max-width: 340px !important;
        margin: 0 !important;
        
        z-index: 1; 
        
        /* 3. SOME OPACITY: Lowers visibility so it doesn't overpower the layout */
        opacity: 0.4; 
        
        /* Clears any leftover fades from the mobile layout */
        -webkit-mask-image: none;
        mask-image: none;
        pointer-events: none; 
    }

    .sbx-hero-art img {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 0 auto !important; /* Keeps image flush right */
    }
}



/* =========================================================
   MOBILE: Badge -> H1 -> Paragraph -> Bottom-Right Edge Cut
========================================================= */

@media(max-width: 768px) {
    .sbx-hero {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 18px;
        padding: 34px 22px 24px 22px; 
        border-radius: 26px;
        text-align: left;
        overflow: hidden; 
    }

    .sbx-hero-content {
        display: flex !important;
        flex-direction: column !important;
        position: relative;
        z-index: 2; 
        width: 100% !important;
    }

    .sbx-hero-kicker, 
    .sbx-hero h1, 
    .sbx-hero p, 
    .sbx-hero-art {
        grid-column: auto;
        grid-row: auto;
    }

    /* 1. BADGE / KICKER */
    .sbx-hero-kicker {
        order: 1;
        margin: 0 0 14px 0 !important;
        width: max-content;
    }

    /* 2. H1 TEXT */
    .sbx-hero h1 {
        order: 2;
        font-size: clamp(24px, 7vw, 40px);
        white-space: normal !important;
        line-height: 1.15 !important;
        margin: 0 0 16px 0 !important;
    }

    /* 3. PARAGRAPH TEXT */
    .sbx-hero p {
        order: 3;
        margin: 0 0 0 0 !important;
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-shadow: none; 
    }

    /* 4. IMAGE (Bottom-right corner edge cut) */
    .sbx-hero-art {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        /* Using your exact transform to push it 25% down and 25% right */
        transform: translate(25%, 25%) !important; 
        
        width: 55% !important; 
        max-width: 180px !important;
        margin: 0 !important; 
        z-index: 1; 
        /* Using your requested 0.65 opacity */
        opacity: 0.65; 
        
        -webkit-mask-image: linear-gradient(to top left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to top left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        
        pointer-events: none;
    }

    .sbx-hero-art img {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        margin: 0 !important;
    }
}

@media(max-width: 480px) {
    .sbx-hero { 
        padding: 30px 18px 20px 18px; 
    }
    .sbx-hero h1 { 
        font-size: clamp(20px, 6vw, 30px); 
    }
    .sbx-hero-art {
        /* Using your requested 60% width for small mobile */
        width: 60% !important; 
    }
}






/* =========================================================
   Applied Filters - Premium UI
========================================================= */

.sbx-applied-wrap,
#sbx-applied-wrap{
    max-width:1320px;
    margin:18px auto 24px;
    padding:0 ;
}

.sbx-applied-card{
    padding:16px;
    border-radius:24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,246,255,.94));
    border:1px solid rgba(124,58,237,.13);
    box-shadow:
        0 18px 45px rgba(35,22,80,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.sbx-applied-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:13px;
}


.sbx-applied-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.sbx-applied-eyebrow{
    display:inline-flex;
    margin-bottom:4px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#ec3f7a;
}

.sbx-applied-head h3{
    margin:0;
    font-size:16px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.02em;
    color:#1f1646;
}

.sbx-applied-total{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(236,63,122,.11);
    color:#ec3f7a;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.sbx-applied-list{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.sbx-remove-filter,
.sbx-clear-all{
    border:0;
    outline:0;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    font-family:inherit;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}

.sbx-remove-filter{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:34px;
    padding:8px 9px 8px 13px;
    border-radius:999px;
    background:#f3edff;
    color:#5d2ed6;
    font-size:12px;
    font-weight:900;
    line-height:1;
    box-shadow:0 10px 24px rgba(93,46,214,.09);
}

.sbx-remove-filter strong{
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#ec3f7a;
    font-size:14px;
    line-height:1;
    font-weight:900;
    box-shadow:0 5px 12px rgba(236,63,122,.12);
}

.sbx-remove-filter:hover{
    transform:translateY(-1px);
    background:#eadfff;
    box-shadow:0 14px 28px rgba(93,46,214,.13);
}

.sbx-clear-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:7px 12px;
    border-radius:999px;
    background:#f7f3ff;
    color:#6d37dc;
    font-size:11px;
    font-weight:900;
    line-height:1;
    box-shadow:none;
}

.sbx-clear-all:hover{
    background:#efe7ff;
    transform:translateY(-1px);
    box-shadow:none;
}

/* Mobile */
@media(max-width:768px){
    .sbx-applied-wrap,
    #sbx-applied-wrap{
        max-width:100%;
        width:100%;
        margin:18px auto 24px;
        padding:0 ;
        box-sizing:border-box;
    }

    .sbx-applied-card{
        width:100%;
        padding:18px 16px;
        border-radius:22px;
        box-sizing:border-box;
    }
	
	.sbx-applied-head{
    align-items:flex-start;
    flex-direction:row;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.sbx-applied-actions{
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
}

    .sbx-applied-head h3{
        font-size:15px;
        line-height:1.2;
    }

    .sbx-applied-total{
        min-height:28px;
        padding:6px 10px;
        font-size:10px;
    }

    .sbx-applied-list{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .sbx-remove-filter,
    .sbx-clear-all{
        min-height:34px;
        font-size:11px;
    }

    .sbx-remove-filter{
        max-width:100%;
        padding:9px 10px 9px 13px;
    }

    .sbx-remove-filter span{
        max-width:210px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .sbx-remove-filter strong{
        flex:0 0 auto;
        width:18px;
        height:18px;
        font-size:13px;
    }

    .sbx-clear-all{
    min-height:28px;
    padding:6px 11px;
    font-size:10px;
}
}

/* Small mobile */
@media(max-width:480px){
    .sbx-applied-wrap,
    #sbx-applied-wrap{
        padding:0;
    }

    .sbx-applied-card{
        padding:18px 14px;
        border-radius:21px;
    }

    .sbx-applied-list{
        gap:9px;
    }

    .sbx-remove-filter span{
        max-width:170px;
    }
}