/* ============================================================
   CLUB TAMARA — COMMUNITY
   STRICT EDITORIAL / BLACK & WHITE
   ============================================================ */

.community-panel{
    position:relative;
    width:100%;
    max-width:none;
    box-sizing:border-box;
    color:#111;
}

.community-panel *,
.community-panel *::before,
.community-panel *::after{
    box-sizing:border-box;
}


/* ============================================================
   HERO
   ============================================================ */

.community-hero{
    position:relative;
    width:100%;
    height:82vh;
    min-height:700px;
    overflow:hidden;
    margin:0 0 110px;
}

.community-hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#eee;
}

.community-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    filter:grayscale(100%);
    transform:scale(1.01);
    transition:
        filter 1.2s ease,
        transform 1.5s cubic-bezier(.22,.61,.36,1);
}

.community-hero:hover .community-hero-image img{
    filter:grayscale(0%);
    transform:scale(1.035);
}

.community-hero-content{
    position:absolute;
    left:60px;
    bottom:60px;
    width:min(640px,calc(100% - 120px));
    padding:48px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.community-title{
    margin:18px 0 20px;
    font-size:42px;
    line-height:1.1;
    font-weight:300;
    letter-spacing:4px;
    text-transform:uppercase;
}

.community-text{
    max-width:520px;
    font-size:14px;
    line-height:1.9;
    opacity:.72;
}


/* ============================================================
   FEATURE
   ============================================================ */

.community-feature{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:80px;
    align-items:center;
    margin:0 0 130px;
}

.community-feature-image{
    width:100%;
    overflow:hidden;
    cursor:pointer;
    background:#eee;
}

.community-feature-image img{
    width:100%;
    height:760px;
    object-fit:cover;
    object-position:center;
    display:block;
    filter:grayscale(100%);
    transition:
        filter 1s ease,
        transform 1.2s cubic-bezier(.22,.61,.36,1);
}

.community-feature-image:hover img{
    filter:grayscale(0%);
    transform:scale(1.035);
}

.community-category{
    margin-bottom:20px;
    font-size:10px;
    letter-spacing:4px;
    text-transform:uppercase;
}

.community-feature-content h2{
    max-width:700px;
    margin:0 0 30px;
    font-size:34px;
    line-height:1.2;
    font-weight:300;
    letter-spacing:3px;
    text-transform:uppercase;
}

.community-feature-content p{
    max-width:520px;
    margin:0 0 35px;
    font-size:14px;
    line-height:1.95;
    opacity:.72;
}

.community-link{
    display:inline-block;
    color:#111;
    text-decoration:none;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    padding-bottom:9px;
    border-bottom:1px solid rgba(0,0,0,.3);
    transition:border-color .3s ease;
}

.community-link:hover{
    color:#111;
    border-color:#111;
}


/* ============================================================
   TOP GRID
   ============================================================ */

.community-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:42px 28px;
    margin:0 0 35px;
}

.community-card{
    min-width:0;
    cursor:pointer;
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s ease,
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.community-card.community-visible{
    opacity:1;
    transform:none;
}

.community-card:hover{
    transform:translateY(-7px);
}

.community-card-image{
    width:100%;
    overflow:hidden;
    background:#eee;
}

.community-card-image img{
    width:100%;
    height:430px;
    object-fit:cover;
    object-position:center;
    display:block;
    filter:grayscale(100%);
    transition:
        filter 1s ease,
        transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.community-card:hover .community-card-image img{
    filter:grayscale(0%);
    transform:scale(1.04);
}

.community-card-body{
    padding-top:23px;
}

.community-card-category{
    margin-bottom:11px;
    font-size:9px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.community-card-title{
    margin-bottom:15px;
    font-size:18px;
    line-height:1.5;
    font-weight:300;
    letter-spacing:2px;
    text-transform:uppercase;
}

.community-card-text{
    font-size:13px;
    line-height:1.8;
    opacity:.65;
}


/* ============================================================
   LOAD MORE
   ============================================================ */

.community-load-more-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin:55px 0 120px;
}

.community-load-more{
    appearance:none;
    border:1px solid rgba(0,0,0,.25);
    outline:none;
    background:transparent;
    color:#111;
    padding:17px 48px;
    font:inherit;
    font-size:10px;
    letter-spacing:4px;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        opacity .35s ease;
}

.community-load-more:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

.community-load-more.is-loading{
    opacity:.4;
    pointer-events:none;
}

.community-load-more.is-hidden{
    display:none;
}


/* ============================================================
   QUOTE
   ============================================================ */

.community-quote{
    width:min(960px,100%);
    margin:150px auto;
    text-align:center;
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.community-quote.community-visible{
    opacity:1;
    transform:none;
}

.community-quote p{
    margin:0;
    font-size:30px;
    line-height:1.7;
    font-weight:300;
    letter-spacing:.5px;
    color:#687080;
}


/* ============================================================
   STORIES
   ============================================================ */

.community-stories{
    width:100%;
    margin:140px 0;
}

.community-section-head{
    margin-bottom:55px;
}

.community-section-head h2{
    margin:18px 0 0;
    font-size:34px;
    line-height:1.2;
    font-weight:300;
    letter-spacing:3px;
}

.community-stories-viewport{
    width:100%;
    overflow:hidden;
}

.community-stories-track{
    display:flex;
    gap:35px;
    transition:
        transform .75s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.story-card{
    flex:0 0 calc((100% - 70px) / 3);
    min-width:0;
    cursor:pointer;
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s ease,
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.story-card.community-visible{
    opacity:1;
    transform:none;
}

.story-card:hover{
    transform:translateY(-7px);
}

.story-card-image{
    width:100%;
    overflow:hidden;
    background:#eee;
}

.story-card img{
    width:100%;
    height:500px;
    object-fit:cover;
    object-position:center;
    display:block;
    filter:grayscale(100%);
    transition:
        filter 1s ease,
        transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.story-card:hover img{
    filter:grayscale(0%);
    transform:scale(1.04);
}

.story-content{
    padding:23px 0;
}

.story-content span{
    font-size:9px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.story-content h3{
    margin:17px 0;
    font-size:18px;
    line-height:1.45;
    font-weight:300;
    letter-spacing:2px;
    text-transform:uppercase;
}

.story-content p{
    margin:0;
    font-size:13px;
    line-height:1.8;
    opacity:.65;
}

.community-stories-controls{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:35px;
}

.community-story-arrow{
    width:48px;
    height:48px;
    padding:0;
    border:1px solid rgba(0,0,0,.18);
    outline:none;
    background:transparent;
    color:#111;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        opacity .35s ease;
}

.community-story-arrow:hover:not(:disabled){
    background:#111;
  /*  color:#fff; */
    border-color:#111;
}

.community-story-arrow:disabled{
    opacity:.25;
    cursor:default;
}


/* ============================================================
   FOOTER / SUBSCRIBE
   ============================================================ */

.community-footer{
    width:100%;
    margin-top:160px;
    padding:60px 0 50px;
    border-top:1px solid rgba(0,0,0,.09);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:60px;
}

.community-footer h2{
    margin:16px 0 0;
    font-size:32px;
    line-height:1.2;
    font-weight:300;
    letter-spacing:3px;
}

.community-subscribe{
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
}

.community-subscribe input{
    width:280px;
    height:51px;
    border:1px solid rgba(0,0,0,.18);
    outline:none;
    background:transparent;
    color:#111;
    padding:0 18px;
    font:inherit;
    font-size:12px;
    letter-spacing:1px;
    transition:border-color .3s ease;
}

.community-subscribe input:focus{
    border-color:#111;
}

.community-subscribe button{
    height:51px;
    border:1px solid #111;
    background:#111;
    color:#fff;
    padding:0 40px;
    font:inherit;
    font-size:10px;
    letter-spacing:3px;
    cursor:pointer;
    transition:
        background .35s ease,
        color .35s ease;
}

.community-subscribe button:hover{
    background:transparent;
    color:#111;
}

.community-subscribe button:disabled{
    opacity:.45;
    cursor:default;
}

.community-subscribe-message{
    position:absolute;
    left:0;
    top:calc(100% + 14px);
    width:100%;
    font-size:10px;
    line-height:1.7;
    letter-spacing:1px;
}

.community-subscribe-success{
    color:#111;
}

.community-subscribe-error{
    color:#9b1c1c;
}


/* ============================================================
   DETAIL MODAL
   ============================================================ */

.community-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2147483647 !important;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:rgba(0,0,0,.76);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.community-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.community-modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.76);
}

.community-modal-window{
    position:relative;
    z-index:2;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    max-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff;
    overflow:hidden;
    transform:translateY(30px);
    transition:
        transform .6s cubic-bezier(.22,.61,.36,1);
}

.community-modal.is-open .community-modal-window{
    transform:none;
}

.community-modal-scroll{
    width:100%;
    height:100%;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,.22) transparent;
}

.community-modal-close{
    position:fixed;
    z-index:50;
    top:22px;
    right:25px;
    width:52px;
    height:52px;
    padding:0;
    border:1px solid rgba(0,0,0,.18);
    background:rgba(255,255,255,.94);
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.community-modal-close svg{
    width:18px;
    height:18px;
}

.community-modal-close:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}


/* ============================================================
   MODAL IMAGE
   ============================================================ */

.community-modal-image{
    width:100%;
    height:min(76vh,850px);
    min-height:450px;
    overflow:hidden;
    background:#eee;
}

.community-modal-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    filter:grayscale(100%);
    opacity:0;
    transition:
        filter .6s ease,
        opacity .4s ease;
    animation:
        communityModalImageIn
        .8s
        cubic-bezier(.22,.61,.36,1)
        both;
}

.community-modal-image img:hover{
    filter:grayscale(0%);
}

@keyframes communityModalImageIn{

    from{
        opacity:0;
        transform:scale(1.025);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}


/* ============================================================
   MODAL CONTENT
   ============================================================ */

.community-modal-content{
    width:min(920px,calc(100% - 50px));
    margin:0 auto;
    padding:65px 0 70px;
}

.community-modal-category{
    margin-bottom:23px;
    font-size:10px;
    line-height:1;
    letter-spacing:5px;
    color:#111;
    text-transform:uppercase;
}

.community-modal-title{
    margin:0 0 32px;
    font-size:42px;
    line-height:1.18;
    font-weight:300;
    letter-spacing:3px;
    text-transform:uppercase;
}

.community-modal-text{
    max-width:800px;
    font-size:15px;
    line-height:2;
    color:#333;
    font-weight:300;
}

.community-modal-text p{
    margin:0 0 22px;
}

.community-modal-text img{
    max-width:100%;
    height:auto;
}


/* ============================================================
   MODAL GALLERY
   ============================================================ */

.community-modal-gallery{
    width:100%;
    padding:0 0 65px;
    border-top:1px solid rgba(0,0,0,.08);
    animation:
        communityGalleryIn
        .8s
        .15s
        cubic-bezier(.22,.61,.36,1)
        both;
}

@keyframes communityGalleryIn{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.community-modal-gallery-title{
    width:min(920px,calc(100% - 50px));
    margin:28px auto 22px;
    font-size:9px;
    letter-spacing:5px;
    opacity:.45;
}

.community-gallery-list{
    display:flex;
    gap:12px;
    width:100%;
    overflow-x:auto;
    padding:0 max(25px,calc((100% - 920px) / 2));
    scrollbar-width:none;
}

.community-gallery-list::-webkit-scrollbar{
    display:none;
}

.community-gallery-item{
    flex:0 0 135px;
    width:135px;
    height:135px;
    overflow:hidden;
    background:#eee;
    cursor:pointer;
    opacity:0;
    transform:translateY(20px);
    animation:
        communityGalleryItemIn
        .65s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}

.community-gallery-item:nth-child(1){animation-delay:.08s}
.community-gallery-item:nth-child(2){animation-delay:.14s}
.community-gallery-item:nth-child(3){animation-delay:.20s}
.community-gallery-item:nth-child(4){animation-delay:.26s}
.community-gallery-item:nth-child(5){animation-delay:.32s}
.community-gallery-item:nth-child(6){animation-delay:.38s}
.community-gallery-item:nth-child(7){animation-delay:.44s}
.community-gallery-item:nth-child(8){animation-delay:.50s}

@keyframes communityGalleryItemIn{

    to{
        opacity:1;
        transform:none;
    }

}

.community-gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(100%);
    transition:
        filter .55s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);
}

.community-gallery-item:hover img,
.community-gallery-item.is-active img{
    filter:grayscale(0%);
    transform:scale(1.05);
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.community-lightbox{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    z-index:2147483648 !important;
    background:rgba(7,7,7,.97);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.community-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.community-lightbox-stage{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 90px;
    box-sizing:border-box;
    touch-action:none;
}

.community-lightbox-image{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
    opacity:0;
    transform:scale(.97);
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22,.61,.36,1);
}

.community-lightbox-image.is-visible{
    opacity:1;
    transform:scale(1);
}

.community-lightbox-close{
    position:absolute;
    z-index:5;
    top:24px;
    right:28px;
    width:52px;
    height:52px;
    padding:0;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.community-lightbox-close:hover{
    background:#fff;
    color:#111;
    border-color:#fff;
}

.community-lightbox-arrow{
    position:absolute;
    z-index:5;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    padding:0;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.18);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.community-lightbox-arrow:hover{
    background:#fff;
    color:#111;
    border-color:#fff;
}

.community-lightbox-prev{
    left:25px;
}

.community-lightbox-next{
    right:25px;
}

.community-lightbox-arrow.is-hidden{
    display:none;
}

.community-lightbox-counter{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    color:#fff;
    font-size:9px;
    letter-spacing:4px;
    opacity:.7;
    white-space:nowrap;
}


/* ============================================================
   BODY LOCK
   ============================================================ */

html.community-modal-open,
body.community-modal-open,
html.community-lightbox-open,
body.community-lightbox-open{
    overflow:hidden !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:900px){

    .community-hero{
        height:65vh;
        min-height:520px;
        margin-bottom:65px;
    }

    .community-hero-content{
        left:20px;
        right:20px;
        bottom:20px;
        width:auto;
        padding:28px;
    }

    .community-title{
        font-size:22px;
        letter-spacing:3px;
    }

    .community-text{
        font-size:13px;
        line-height:1.75;
    }

    .community-feature{
        grid-template-columns:1fr;
        gap:35px;
        margin-bottom:75px;
    }

    .community-feature-image img{
        height:360px;
    }

    .community-feature-content h2{
        font-size:23px;
    }

    .community-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    .community-card-image img{
        height:320px;
    }

    .community-load-more-wrap{
        margin:45px 0 75px;
    }

    .community-quote{
        margin:85px auto;
        padding:0 12px;
    }

    .community-quote p{
        font-size:19px;
        line-height:1.7;
    }

    .community-stories{
        margin:85px 0;
    }

    .community-section-head{
        margin-bottom:35px;
    }

    .community-section-head h2{
        font-size:23px;
    }

    .community-stories-track{
        gap:20px;
    }

    .story-card{
        flex:0 0 82%;
    }

    .story-card img{
        height:390px;
    }

    .community-stories-controls{
        justify-content:flex-start;
    }

    .community-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:30px;
        margin-top:90px;
    }

    .community-footer h2{
        font-size:23px;
    }

    .community-subscribe{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .community-subscribe input,
    .community-subscribe button{
        width:100%;
    }

    .community-subscribe-message{
        position:static;
        margin-top:13px;
    }


    /* MODAL */

    .community-modal-window{
        width:100vw !important;
        height:100vh !important;
        max-height:100vh !important;
    }

    .community-modal-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }

    .community-modal-image{
        height:58vh;
        min-height:340px;
    }

    .community-modal-content{
        width:calc(100% - 40px);
        padding:40px 0 45px;
    }

    .community-modal-category{
        font-size:9px;
        letter-spacing:4px;
        margin-bottom:18px;
    }

    .community-modal-title{
        font-size:25px;
        letter-spacing:2px;
        line-height:1.22;
        margin-bottom:25px;
    }

    .community-modal-text{
        font-size:14px;
        line-height:1.85;
    }

    .community-modal-gallery{
        padding-bottom:35px;
    }

    .community-modal-gallery-title{
        width:calc(100% - 40px);
        margin:23px auto 18px;
    }

    .community-gallery-list{
        padding:0 20px;
        gap:8px;
    }

    .community-gallery-item{
        flex-basis:95px;
        width:95px;
        height:95px;
    }


    /* LIGHTBOX */

    .community-lightbox-stage{
        padding:55px 18px 65px;
    }

    .community-lightbox-image{
        max-width:100%;
        max-height:100%;
    }

    .community-lightbox-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }

    .community-lightbox-arrow{
        width:44px;
        height:44px;
        top:auto;
        bottom:18px;
        transform:none;
    }

    .community-lightbox-prev{
        left:18px;
    }

    .community-lightbox-next{
        right:18px;
    }

    .community-lightbox-counter{
        bottom:32px;
        font-size:9px;
        letter-spacing:3px;
    }

}


@media(max-width:480px){

    .community-hero{
        height:70vh;
        min-height:500px;
    }

    .community-hero-content{
        padding:23px;
    }

    .community-title{
        font-size:20px;
    }

    .community-card-image img{
        height:300px;
    }

    .story-card img{
        height:350px;
    }

    .community-modal-image{
        height:52vh;
        min-height:300px;
    }

    .community-lightbox-stage{
        padding-left:12px;
        padding-right:12px;
    }

}



/* ============================================================
   SUBSCRIBE — POLICY CONSENT
   ============================================================ */

.community-subscribe-consent {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 18px;
    cursor: pointer;
    user-select: none;
    top: -50px;
}

.community-subscribe-consent input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.community-subscribe-checkbox {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 0px;
    border: 1px solid rgba(0,0,0,.45);
    background: transparent;
    transition:
        background .2s ease,
        border-color .2s ease;
}

.community-subscribe-consent input:checked + .community-subscribe-checkbox {
    background: #111;
    border-color: #111;
}

.community-subscribe-consent input:checked + .community-subscribe-checkbox::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
}

.community-subscribe-consent input:focus-visible + .community-subscribe-checkbox {
    outline: 1px solid #111;
    outline-offset: 3px;
}

.community-subscribe-consent-text {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #555;
}

.community-subscribe-consent-text a {
    color: #111;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.community-subscribe-consent-text a:hover {
    text-decoration: none;
}

.community-subscribe-consent.is-error .community-subscribe-checkbox {
    border-color: #111;
}

@media (max-width: 700px) {
    .club-private-panel h2 {
        font-size: 21px;
        padding-bottom: 30px;
    }
    .community-subscribe-consent {
    top: -60px;
}
}
 @media (min-width: 700px) {
    .slogan {
        font-size: 30px !important;
    }
    }




    .community-stories-viewport {
    overflow: hidden;
    width: 100%;
}

.community-stories-track {
    display: flex;
    gap: 20px;
    will-change: transform;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    touch-action: pan-y;
}

.story-card {
    flex: 0 0 calc((100% - 40px) / 3);
}

@media (max-width: 900px) {
    .community-stories-track {
        gap: 14px;
    }

    .story-card {
        flex: 0 0 100%;
    }
}



/* ============================================================
   STORIES CONTROLS — FASHION ARROWS
   ============================================================ */

.community-stories-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin-top: 28px;
}

.community-story-arrow {
    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 24px;

    padding: 0;
    margin: 0;

    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;

    color: #111;
    cursor: pointer;

    opacity: 1;
    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.community-story-arrow svg {
    display: block;
    width: 42px;
    height: 18px;

    overflow: visible;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        opacity .25s ease;
}

/* Никаких ugly hover-рамок */
.community-story-arrow:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Левая стрелка */
.community-story-arrow#communityStoryPrev:hover {
    transform: translateX(-4px);
}

/* Правая стрелка */
.community-story-arrow#communityStoryNext:hover {
    transform: translateX(4px);
}

/* Неактивная стрелка */
.community-story-arrow:disabled {
    opacity: .18;
    cursor: default;
    pointer-events: none;
}

/* Убираем стандартный focus */
.community-story-arrow:focus,
.community-story-arrow:active {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Красивый keyboard focus */
.community-story-arrow:focus-visible {
    outline: 1px solid rgba(0,0,0,.25) !important;
    outline-offset: 6px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .community-stories-controls {
        justify-content: space-between;
        margin-top: 22px;
        padding: 0 2px;
    }

    .community-story-arrow {
        width: 42px;
        height: 24px;
    }

    .community-story-arrow svg {
        width: 42px;
        height: 18px;
    }

    /*
     * На телефоне hover не нужен —
     * оставляем стрелки спокойными.
     */
    .community-story-arrow:hover {
        transform: none;
    }
}