.mnsw-media-carousel{

    display:flex;
    gap:var(--mnsw-feed-gap, 30px);
    overflow-x:auto;
    padding:4px;
    scroll-snap-type:x mandatory;

}

.mnsw-media-carousel-item{

    /*
     * --mnsw-carousel-item e emitido pelo template do Theme quando a
     * Section configura o Image Size. O min() com 78vw preserva a
     * responsividade em telas estreitas.
     */
    flex:0 0 min(var(--mnsw-carousel-item, 280px), 78vw);
    scroll-snap-align:start;
    position:relative;

    /*
     * Elevacao sob o ponteiro, na mesma linguagem visual que o Feed ja
     * pratica em .mnsw-card — a mesma transicao, e um deslocamento
     * puramente visual. Nenhuma dimensao muda, nenhum vizinho se move e
     * nao ha reflow: transform nao participa do layout.
     *
     * O efeito NAO pertence a Capability Motion. No Feed ele vive na
     * regra base do Card, fora de qualquer modificador mnsw-motion-*, e
     * aqui segue o mesmo criterio: nenhuma configuracao administrativa
     * existe para ele, nem passa a existir. Pelo mesmo motivo ele nao e
     * suprimido sob prefers-reduced-motion — o Feed tambem nao o
     * suprime, e os dois componentes ficam com o mesmo comportamento.
     */
    transition:.25s;

}

/*
 * O deslocamento e de 4px, e nao dos 5px do Feed, por uma razao
 * geometrica medida: a faixa do Carousel rola, e um contentor de
 * rolagem recorta no proprio padding. A folga superior disponivel e
 * exatamente o padding-top da faixa — 4px nesta regra. Com 5px o topo
 * do Card era recortado em 1px durante o hover, medido nas Sections que
 * usam o padding base.
 *
 * O Feed nao tem esse limite porque os seus Cards nao vivem num
 * contentor de rolagem, e por isso ele pode reservar espaco com padding
 * (.mnsw-card--headerless). Reservar aqui alteraria a altura da faixa,
 * o que esta fora do que este efeito deve tocar.
 */
.mnsw-media-carousel-item:hover{

    transform:translateY(-4px);

}

/*
 * Data sobreposta ao topo da imagem, centralizada, sem ocupar espaco
 * no fluxo. pointer-events:none preserva o clique do viewer.
 */
.mnsw-media-carousel-item__date{

    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;

    /*
     * --mnsw-carousel-meta acompanha o nivel do Image Size emitido
     * pelo template do Theme. Icone, data e hora escalam juntos.
     */
    font-size:var(--mnsw-carousel-meta, 12px);
    line-height:1.4;
    white-space:nowrap;
    pointer-events:none;

}

/*
 * Dashicons define 20px fixos de fonte e caixa; o icone da metadata
 * herda o tamanho do pill para manter a proporcao com data e hora.
 *
 * A cor, porem, e a do Provider — ou a do proprio Menu Card, que
 * chega pela mesma variavel —, emitida pelo item a partir de
 * ContentItem::providerColor. Somente o icone e alcancado: data e
 * hora permanecem com a cor que a pill ja lhes da, e sem cor
 * configurada o icone volta exatamente a ela.
 */
.mnsw-media-carousel-item__date i{

    font-size:inherit;
    width:auto;
    height:auto;
    line-height:1;
    color:var(--mnsw-provider-color, inherit);

}

.mnsw-media-carousel-item__viewer{

    display:block;
    width:100%;
    padding:0;
    margin:0;

    /*
     * A moldura recebe a mesma forca do fundo, e pelo mesmo motivo:
     * regras de button do tema hospedeiro vencem uma classe unica e
     * desenhavam uma linha ao redor da midia no repouso, que sumia no
     * hover quando o bloco de estados — de especificidade maior que a
     * regra base externa — voltava a valer. A linha nao e uma
     * caracteristica configuravel do produto: o botao e chrome
     * invisivel, sem borda, sem sombra e sem contorno em todos os
     * estados, por declaracao propria deste arquivo.
     */
    border:0 !important;
    border-radius:0;

    /*
     * O botao e a camada imediatamente atras da imagem: qualquer cor
     * que o tema hospedeiro pintar aqui aparece atraves de PNGs
     * transparentes e nas areas que a imagem nao cobre. O bloco de
     * estados abaixo ja neutralizava isso com !important; o repouso
     * precisa da mesma forca, senao a cor externa aparece parada e
     * some ao passar o mouse.
     */
    background:transparent !important;
    background-color:transparent !important;
    color:inherit;
    font:inherit;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    text-align:inherit;
    text-transform:none;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:none !important;
    outline:none !important;
    -webkit-tap-highlight-color:transparent;

    /*
     * Contexto de posicionamento do indicador de midia clicavel: os
     * pseudo-elementos centram-se contra este elemento, que contem
     * exclusivamente a imagem. Contra o <article> a referencia incluiria
     * o titulo abaixo da imagem e o indicador ficaria deslocado. Nao
     * altera o layout: o elemento ja e um bloco no fluxo.
     */
    position:relative;

}

.mnsw-media-carousel-item__viewer:hover,
.mnsw-media-carousel-item__viewer:focus,
.mnsw-media-carousel-item__viewer:focus-visible,
.mnsw-media-carousel-item__viewer:active{

    border:0 !important;
    border-radius:0;
    color: inherit !important;
    background:transparent;
    background-color: transparent !important;
    color:inherit;
    box-shadow:none !important;
    outline:none !important;
    -webkit-tap-highlight-color:transparent;

}


.mnsw-media-carousel-item__image{

    display:block;
    width:100%;
    /*
     * PRESENTATION-01: Image Ratio reutiliza a mesma variavel do
     * Feed. Sem configuracao a variavel nao e emitida e o quadrado
     * atual permanece exatamente como esta.
     */
    aspect-ratio:var(--mnsw-image-ratio, 1);
    object-fit:cover;
    border-radius:var(--mnsw-card-radius, 14px);
    box-shadow:var(--mnsw-card-shadow, 0 10px 25px rgba(0,0,0,.08));

}

/*
 * Image Border e Image Shape da imagem do item.
 *
 * Duas classes pelo mesmo motivo do Feed: o reset do Elementor —
 * .elementor img — vence uma classe unica e apagava a borda na pagina
 * real. A linha pertence a imagem e acompanha area, formato e rounding;
 * cor do Accent da Appearance. O raio do circle (50%) vence o Rounding
 * enquanto ativo; em original, o Rounding segue governando pelas regras
 * dos Themes.
 */
.mnsw-media-carousel-item .mnsw-media-carousel-item__image{

    border:var(--mnsw-image-border, 0) solid var(--mnsw-accent-color, #1877F2);

    box-sizing:border-box;

    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-card-radius, 14px));

}

/*
 * Dentro do viewer a linha pertence ao wrapper acima: a midia nao a
 * repete. A regra da midia direta permanece para o ramo sem
 * experiencia, onde nao ha wrapper e tambem nao ha zoom.
 */
/*
 * Dentro do viewer a imagem zera borda e raio: o viewer e quem carrega
 * a Image Border e o arredondamento (Rounding/Shape) e quem recorta
 * com overflow:hidden. Com raio proprio a imagem arredondava numa
 * caixa recuada pelo anel e abria um vao nos cantos antes do hover,
 * que o zoom preenchia — a area visivel mudava entre os estados. Tres
 * classes para vencer as regras de imagem dos Themes, que permanecem
 * validas para o ramo sem viewer (o <img> sem wrapper interativo).
 */
.mnsw-media-carousel-item .mnsw-media-carousel-item__viewer .mnsw-media-carousel-item__image{

    border:0;

    border-radius:0;

}

.mnsw-media-carousel-item__title{

    margin:10px 0 0;
    color:var(--mnsw-text-color, #444444);

}

.mnsw-lightbox{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:24px;

}

.mnsw-lightbox__content{

    position:relative;
    max-width:min(900px, 100%);

}

.mnsw-lightbox__content img{

    width:100%;
    max-height:80vh;
    object-fit:contain;
    border-radius:12px;
}

/*
 * Controle de fechar, comum aos tres modos do Lightbox e ao Viewer.
 *
 * A cor de identidade do controle e o ACCENT da Section, propagado ao
 * overlay pelo Runtime a partir do Appearance efetivo, ja com a heranca
 * Wall -> Section aplicada. E o mesmo criterio que o indicador ativo da
 * navegacao horizontal ja pratica: o Accent e a cor de identidade, e o
 * chrome do overlay pertence a ela.
 *
 * Button Background nao participa e nao serve de fallback: sao sistemas
 * distintos, e o Button governa exclusivamente os botoes de conteudo.
 * O fallback existe apenas para o caso de o Theme nao emitir o token, e
 * e o mesmo valor que os demais consumidores de Accent ja declaram.
 *
 * O simbolo usa o branco do proprio chrome do overlay — o mesmo que o
 * caminho para o destino, o outline da thumbnail ativa e o controle de
 * volume ja usam —, porque o Accent e uma cor saturada de identidade e
 * nao possui token de texto pareado.
 *
 * O reset de moldura acompanha, pelo mesmo motivo ja registrado nos
 * cards do Stories: regras de button do tema hospedeiro pintam borda,
 * contorno e sombra sobre este controle, inclusive por pseudo-elemento
 * e com especificidade maior que uma classe unica.
 */
.mnsw-lightbox .mnsw-lightbox__close,
.mnsw-lightbox .mnsw-lightbox__close:hover,
.mnsw-lightbox .mnsw-lightbox__close:focus,
.mnsw-lightbox .mnsw-lightbox__close:focus-visible,
.mnsw-lightbox .mnsw-lightbox__close:active{

    background:var(--mnsw-accent-color, #1877F2) !important;
    color:#ffffff !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    -webkit-tap-highlight-color:transparent;

}

.mnsw-lightbox .mnsw-lightbox__close::before,
.mnsw-lightbox .mnsw-lightbox__close::after{

    content:none !important;

}

.mnsw-lightbox__close{

    position:absolute;
    /*
     * Acima dos elementos posicionados que os modos apresentam sobre a
     * midia — faixa de progresso e controle de audio do Stories.
     */
    z-index:3;
    top:10px;
    right:10px;
    border-radius:999px;
    width:36px;
    height:36px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

/*
 * Container do Viewer (DD-129): o mesmo overlay compartilhado do
 * Lightbox apresenta a representacao em iframe criado pelo runtime na
 * abertura. O caminho explicito para o destino original permanece
 * sempre disponivel abaixo do frame.
 *
 * A calha e exclusiva do Viewer e tem especificidade igual a da base
 * .mnsw-lightbox: esta regra vence por ordem de fonte e deve permanecer
 * declarada apos a base. O Lightbox mantem os 24px originais.
 */
.mnsw-lightbox--viewer{

    /*
     * Calha unica do Viewer, valida para todas as representacoes: e ela
     * que define a area padrao de apresentacao. A componente vertical
     * preserva uma faixa do site atras do overlay, em cima e embaixo; a
     * horizontal delimita a largura util. Nenhum perfil declara calha
     * propria, e nenhuma origem recebe area diferente.
     */
    padding:clamp(24px, 5vh, 64px) clamp(24px, 10vw, 200px);
}

.mnsw-lightbox--viewer .mnsw-lightbox__content{

    width:100%;
    max-width:none;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mnsw-lightbox__frame{

    flex:1 1 auto;
    width:100%;
    min-height:0;
    border:0;
    border-radius:12px;
    background:#ffffff;
}

.mnsw-lightbox__open{

    align-self:center;
    color:#ffffff;
    font-size:14px;
    text-decoration:underline;
}

/*
 * Area padrao unica (INTERACTION-16): todas as representacoes recebem a
 * mesma janela — mesma largura, mesma altura, mesma calha e mesma
 * centralizacao —, definida exclusivamente pela regra --viewer acima. A
 * janela nao varia por origem nem com a altura do documento
 * apresentado.
 *
 * Escala do conteudo dentro da janela. Um player se adapta a caixa que
 * recebe e preenche a janela inteira sem distorcao. Um documento de
 * incorporacao e dirigido pela largura: ele escala a propria midia para
 * a largura que receber, entao uma janela larga produz conteudo
 * vertical alto demais, que transborda a altura disponivel. O token
 * identifica esse tipo de conteudo — nunca uma origem — e limita a
 * caixa do documento a sua largura natural, centralizando-a na janela.
 * A proporcao e preservada pelo proprio documento; nada e deformado nem
 * recortado.
 *
 * A regra atua no frame, jamais na janela: .mnsw-lightbox__content
 * mantem as dimensoes da regra geral, e por isso o controle de fechar e
 * o link de saida permanecem nas posicoes da janela.
 */
.mnsw-lightbox--viewer-portrait .mnsw-lightbox__frame{

    max-width:min(100%, 500px);
    align-self:center;
}

/*
 * Superficie da janela. Como o documento ocupa apenas parte da largura,
 * a area restante se confundia com o fundo escurecido da pagina e a
 * extensao da janela aberta ficava ambigua. Pintar a superficie torna
 * esse limite visivel. A regra e exclusivamente de pintura: nao declara
 * largura, altura, espacamento nem posicionamento, entao as dimensoes,
 * a posicao do conteudo, a do controle de fechar e o comportamento de
 * clique permanecem os da regra geral.
 *
 * O link de saida fica dentro dessa superficie e e claro por padrao;
 * sobre o branco precisa de contraste, unica consequencia da pintura.
 */
.mnsw-lightbox--viewer-portrait .mnsw-lightbox__content{

    background:#ffffff;
    border-radius:12px;
}

.mnsw-lightbox--viewer-portrait .mnsw-lightbox__open{

    color:#1a1a1a;
}

/*
 * Lightbox Modes (INTERACTION-17).
 *
 * Os tres modos da Capability media-lightbox sao modificadores de
 * apresentacao do mesmo overlay compartilhado, no padrao que o Viewer
 * ja pratica com --viewer. Nenhum overlay novo existe, e a base
 * .mnsw-lightbox permanece exatamente como esta.
 *
 * Hero nao declara regra propria alem da midia: a sua apresentacao e a
 * da base, que e a apresentacao ja existente antes desta Sprint.
 */
.mnsw-lightbox__media{

    width:100%;
    max-height:80vh;
    object-fit:contain;
    border-radius:12px;
    background:#000000;

}

/*
 * Representacao incorporada, comum aos tres modos.
 *
 * O elemento e o mesmo frame que o Viewer ja declara — dele vem moldura,
 * raio e superficie —, e aqui recebe apenas a GEOMETRIA que falta.
 *
 * Onde o contentor tem altura definida — a midia principal do Gallery e
 * o card do Stories — quem governa e o contentor, e as regras daqueles
 * contentores ja alcancam o iframe junto de img e video. E a mesma
 * decisao ja registrada ali: o CONTENTOR e a referencia geometrica, e o
 * conteudo se adapta a ele.
 *
 * Resta o Hero, que apresenta a midia direto no conteudo do overlay, sem
 * altura definida. Um <iframe> nao possui dimensao intrinseca e sem
 * altura assumiria os 150px do padrao: e a proporcao que produz a caixa,
 * sob a mesma calha vertical de .mnsw-lightbox__media, para que a
 * representacao ocupe a area que uma midia nativa ocuparia.
 */
.mnsw-lightbox--hero .mnsw-lightbox__embed{

    /*
     * A largura e VIEWPORT-RELATIVA, e nao 100%, porque no Hero o
     * conteudo do overlay se dimensiona pelo proprio conteudo: uma
     * largura percentual dependeria da caixa que ela mesma determina, e
     * o iframe colapsava para os 300x150 do padrao. Medido.
     *
     * O valor reproduz exatamente o limite que o conteudo do Hero ja
     * declara — min(900px, 100%) sobre a caixa do overlay, cuja largura
     * util e a viewport menos a calha de 24px de cada lado.
     */
    width:min(900px, calc(100vw - 48px));
    height:auto;
    aspect-ratio:16 / 9;
    max-height:80vh;

}

/*
 * Perfil de apresentacao emitido pelo item: documentos de incorporacao
 * dirigidos pela largura e de conteudo predominantemente vertical, que
 * numa caixa larga apresentariam o documento no topo e espaco vazio no
 * resto.
 *
 * A coluna centralizada e a mesma medida que o Viewer ja pratica para o
 * mesmo perfil. A margem automatica centraliza tanto no conteudo do Hero
 * quanto na area flex da midia principal do Gallery.
 *
 * Os dois seletores compostos vencem, por especificidade, o max-width do
 * contentor da midia principal.
 */
.mnsw-lightbox--hero .mnsw-lightbox__embed--portrait{

    aspect-ratio:4 / 5;

}

.mnsw-lightbox--hero .mnsw-lightbox__embed--portrait,
.mnsw-lightbox__main .mnsw-lightbox__embed--portrait{

    max-width:min(100%, 500px);
    margin-inline:auto;

}

/*
 * Stories: janela visual de cinco posicoes fixas ao redor do centro.
 *
 * Cada item do snapshot possui o seu card; o Runtime declara apenas a
 * POSICAO de cada um, e deslocamento, escala e opacidade derivam dela
 * aqui (DD-INT-011). Como o que muda numa navegacao e a posicao, e nao
 * o conteudo, os cards se deslocam entre as posicoes.
 */
.mnsw-lightbox--stories .mnsw-lightbox__content{

    width:100%;
    max-width:min(1280px, 100%);
    height:100%;
    display:flex;
    flex-direction:column;

}

.mnsw-lightbox__stage{

    position:relative;
    flex:1 1 auto;
    min-height:0;

    /*
     * Altura do card central. E ela que conduz a geometria vertical, e e
     * declarada sem percentagem de proposito: uma percentagem resolveria
     * contra dimensoes diferentes conforme o contexto de uso, e esta
     * medida precisa ser legivel tanto na altura do card quanto na
     * posicao do controle de audio.
     */
    --mnsw-stories-card-h:min(72vh, 620px);

    /*
     * Largura do card central: derivada da altura, em proporcao
     * retrato, e limitada pela largura do palco — o limite percentual
     * impede que as cinco posicoes transbordem em viewports largas e
     * baixas.
     */
    --mnsw-stories-card:min(calc(var(--mnsw-stories-card-h) * .62), 27%);

    /*
     * Deslocamentos das posicoes, em multiplos da largura do card.
     *
     * Sao percentagens porque, em translateX(), a percentagem resolve
     * contra a largura do PROPRIO elemento — e todos os cards possuem a
     * mesma largura. Exprimi-los como fracao da largura do palco
     * produziria deslocamentos completamente diferentes dos pretendidos,
     * com os cards sobrepostos.
     *
     * Com o card em 27% do palco, a posicao ±2 alcanca 1,8 larguras a
     * partir do centro — 48,6% do palco —, de modo que as cinco
     * posicoes cabem sem sobreposicao e sem transbordar.
     */
    --mnsw-stories-step-1:95%;
    --mnsw-stories-step-2:160%;
    --mnsw-stories-step-3:210%;

    /* Faixa reservada ao controle de audio, abaixo do card central. */
    --mnsw-stories-audio:46px;

}

/*
 * O card e a referencia geometrica da sua midia: a caixa nunca depende
 * das dimensoes intrinsecas do conteudo, e por isso nada se move quando
 * uma imagem carrega ou quando um video troca o poster pelo quadro.
 */
.mnsw-lightbox__card{

    position:absolute;
    /*
     * O card e centrado no palco — vertical e horizontalmente — pelo
     * mesmo transform que o posiciona, e a sua altura vem da variavel
     * condutora, limitada pelo espaco que sobra acima do controle de
     * audio.
     */
    top:50%;
    left:50%;
    width:var(--mnsw-stories-card);
    height:var(--mnsw-stories-card-h);
    max-height:calc(100% - var(--mnsw-stories-audio));
    margin:0;
    padding:0;
    border:0;
    cursor:pointer;
    transform-origin:center center;

    /*
     * A superficie do card e o que torna a faixa de progresso legivel
     * como parte dele: com object-fit:contain a midia raramente preenche
     * a caixa toda, e sem superficie a faixa pareceria solta no escuro.
     * Recortar a midia para preencher resolveria a mesma questao, mas ao
     * custo de mutilar o conteudo — o que esta experiencia nao faz.
     */
    background:rgba(255,255,255,.06);
    border-radius:14px;
    overflow:hidden;

}

/*
 * O card e um <button>, e regras de button do tema hospedeiro pintam
 * moldura sobre ele. A verificacao no navegador mostrou que a moldura
 * chega por QUATRO caminhos distintos, e nao por um so:
 *
 *   1. contorno no foco, por regra de especificidade maior que uma
 *      classe unica e ainda com !important — e o contorno que persiste
 *      depois do clique, porque clicar foca o botao;
 *   2. moldura desenhada em pseudo-elemento do botao;
 *   3. borda no contentor interno da midia;
 *   4. borda na propria imagem — a mesma borda que, reduzida pela
 *      escala dos cards laterais, aparece como uma linha mais fina.
 *
 * Por isso o reset alcanca o botao, os seus pseudo-elementos, o
 * contentor e a midia, e e prefixado pelo modificador do modo para
 * vencer seletores externos mais especificos.
 *
 * O reset e exclusivamente de apresentacao: estado ativo, foco
 * funcional, clique, navegacao, posicao, escala, opacidade e animacao
 * permanecem intactos. A diferenciacao dos cinco cards continua sendo
 * feita apenas por posicao, escala e opacidade — nunca por moldura.
 */
.mnsw-lightbox--stories .mnsw-lightbox__card,
.mnsw-lightbox--stories .mnsw-lightbox__card:hover,
.mnsw-lightbox--stories .mnsw-lightbox__card:focus,
.mnsw-lightbox--stories .mnsw-lightbox__card:focus-visible,
.mnsw-lightbox--stories .mnsw-lightbox__card:active,
.mnsw-lightbox--stories .mnsw-lightbox__card-media,
.mnsw-lightbox--stories .mnsw-lightbox__card img,
.mnsw-lightbox--stories .mnsw-lightbox__card video,
.mnsw-lightbox--stories .mnsw-lightbox__card:hover img,
.mnsw-lightbox--stories .mnsw-lightbox__card:focus img,
.mnsw-lightbox--stories .mnsw-lightbox__card:focus-visible img,
.mnsw-lightbox--stories .mnsw-lightbox__card:active img{

    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    -webkit-tap-highlight-color:transparent;

}

/*
 * Molduras desenhadas em pseudo-elemento do botao deixam de existir. O
 * modo nao usa pseudo-elementos nos cards, de modo que nada proprio e
 * suprimido aqui.
 */
.mnsw-lightbox--stories .mnsw-lightbox__card::before,
.mnsw-lightbox--stories .mnsw-lightbox__card::after{

    content:none !important;

}

/*
 * A superficie e re-afirmada nos estados porque as mesmas regras
 * externas repintavam o fundo do botao ao passar o mouse e ao focar.
 */
.mnsw-lightbox--stories .mnsw-lightbox__card:hover,
.mnsw-lightbox--stories .mnsw-lightbox__card:focus,
.mnsw-lightbox--stories .mnsw-lightbox__card:focus-visible,
.mnsw-lightbox--stories .mnsw-lightbox__card:active{

    background:rgba(255,255,255,.06);
    color:inherit;

}

/*
 * O controle de audio e igualmente um <button> e recebe o mesmo reset,
 * preservando a sua propria pastilha.
 */
.mnsw-lightbox__audio-toggle,
.mnsw-lightbox__audio-toggle:hover,
.mnsw-lightbox__audio-toggle:focus,
.mnsw-lightbox__audio-toggle:focus-visible,
.mnsw-lightbox__audio-toggle:active{

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    -webkit-tap-highlight-color:transparent;

}

.mnsw-lightbox__card-media{

    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;

}

.mnsw-lightbox__card img,
.mnsw-lightbox__card video,
.mnsw-lightbox__card iframe{

    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:12px;

}

/*
 * As cinco posicoes. A hierarquia e dupla — escala e opacidade —, e os
 * valores sao internos a apresentacao do Stories: nao existe
 * configuracao administrativa para eles.
 *
 * A posicao fora da janela fica alem de ±2, invisivel: e dela que um
 * card entra e para ela que sai, o que da continuidade ao deslocamento.
 */
.mnsw-lightbox__card[data-mnsw-position^="out"]{

    opacity:0;
    pointer-events:none;
    z-index:1;

}

.mnsw-lightbox__card[data-mnsw-position="out-prev"]{

    transform:translate(-50%, -50%) translateX(calc(var(--mnsw-stories-step-3) * -1)) scale(.38);

}

.mnsw-lightbox__card[data-mnsw-position="out-next"]{

    transform:translate(-50%, -50%) translateX(var(--mnsw-stories-step-3)) scale(.38);

}

.mnsw-lightbox__card[data-mnsw-position="-2"]{

    transform:translate(-50%, -50%) translateX(calc(var(--mnsw-stories-step-2) * -1)) scale(.45);
    opacity:.5;
    z-index:2;

}

.mnsw-lightbox__card[data-mnsw-position="2"]{

    transform:translate(-50%, -50%) translateX(var(--mnsw-stories-step-2)) scale(.45);
    opacity:.5;
    z-index:2;

}

.mnsw-lightbox__card[data-mnsw-position="-1"]{

    transform:translate(-50%, -50%) translateX(calc(var(--mnsw-stories-step-1) * -1)) scale(.7);
    opacity:.75;
    z-index:3;

}

.mnsw-lightbox__card[data-mnsw-position="1"]{

    transform:translate(-50%, -50%) translateX(var(--mnsw-stories-step-1)) scale(.7);
    opacity:.75;
    z-index:3;

}

.mnsw-lightbox__card[data-mnsw-position="0"]{

    transform:translate(-50%, -50%) scale(1);
    opacity:1;
    z-index:4;
    cursor:default;

}

.mnsw-lightbox__card:not([data-mnsw-position="0"]):hover,
.mnsw-lightbox__card:not([data-mnsw-position="0"]):focus-visible{

    opacity:.9;

}

/*
 * A faixa de progresso existe somente sobre o card central: e
 * posicionada sobre ele, nunca no topo do overlay, e nao acompanha card
 * algum no deslocamento.
 *
 * A faixa e informativa e nunca interativa: sem pointer-events ela
 * jamais intercepta o clique destinado ao controle de fechar.
 */
.mnsw-lightbox__progress{

    position:absolute;
    z-index:5;
    /*
     * Recuada a partir do topo do card central, e nao do palco: a faixa
     * repousa sobre o card, como a experiencia exige, e acompanha a sua
     * altura efetiva mesmo quando o palco a limita.
     */
    top:calc(50% - min(var(--mnsw-stories-card-h), 100% - var(--mnsw-stories-audio)) / 2 + 12px);
    left:50%;
    transform:translateX(-50%);
    width:calc(var(--mnsw-stories-card) - 24px);
    display:flex;
    gap:4px;
    pointer-events:none;
    /* Contraste sobre midia clara, sem pintar faixa de fundo. */
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));

}

.mnsw-lightbox__progress-segment{

    flex:1 1 0;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.4);
    overflow:hidden;

}

/*
 * A largura do preenchimento e escrita pelo Runtime a cada quadro: ela
 * representa o tempo decorrido acumulado, e por isso nao declara
 * transicao — uma transicao competiria com a pausa e faria o indicador
 * continuar a andar depois de congelado.
 */
.mnsw-lightbox__progress-fill{

    display:block;
    width:0;
    height:100%;
    background:#ffffff;

}

/*
 * Controle de audio: abaixo do card central, na faixa reservada para
 * ele, e apresentado somente quando o item central reproduz.
 */
.mnsw-lightbox__audio{

    position:absolute;
    z-index:5;
    left:50%;
    /*
     * Logo abaixo da borda inferior do card central: a posicao deriva da
     * mesma altura que governa o card, inclusive quando o palco a
     * limita, de modo que o controle acompanha o card em vez de ficar
     * preso ao fundo do palco.
     */
    top:calc(50% + min(var(--mnsw-stories-card-h), 100% - var(--mnsw-stories-audio)) / 2 + 10px);
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    /*
     * O controle precisa ser legivel tanto sobre a midia quanto sobre a
     * area escurecida do overlay: o contorno claro delimita a pastilha
     * onde o fundo escuro sozinho a tornaria indistinguivel.
     */
    background:rgba(20,20,20,.72);
    border:1px solid rgba(255,255,255,.18);

}

.mnsw-lightbox__audio[hidden]{

    display:none;

}

.mnsw-lightbox__audio-toggle{

    display:flex;
    align-items:center;
    justify-content:center;
    /*
     * Area minima de toque preservada mesmo quando o Theme nao fornece
     * icone: sem ela o controle colapsaria a largura zero.
     */
    min-width:20px;
    min-height:20px;
    padding:0;
    border:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;

}

.mnsw-lightbox__audio-volume{

    width:96px;
    accent-color:#ffffff;
    cursor:pointer;

}

/*
 * Gallery: midia principal e faixa de thumbnails. thumbnail_size e a
 * unica configuracao dimensional (D-17) — dela decorrem a extensao da
 * faixa, a quantidade de thumbnails visiveis e, por consequencia, a
 * area restante da midia principal, que nunca declara dimensao propria.
 */
.mnsw-lightbox--gallery .mnsw-lightbox__content{

    width:100%;
    max-width:none;
    height:100%;

}

.mnsw-lightbox__gallery{

    display:flex;
    height:100%;
    gap:12px;
    --mnsw-lightbox-thumb:96px;

}

.mnsw-lightbox--gallery-size-xs .mnsw-lightbox__gallery{ --mnsw-lightbox-thumb:56px; }
.mnsw-lightbox--gallery-size-sm .mnsw-lightbox__gallery{ --mnsw-lightbox-thumb:76px; }
.mnsw-lightbox--gallery-size-md .mnsw-lightbox__gallery{ --mnsw-lightbox-thumb:96px; }
.mnsw-lightbox--gallery-size-lg .mnsw-lightbox__gallery{ --mnsw-lightbox-thumb:128px; }
.mnsw-lightbox--gallery-size-xl .mnsw-lightbox__gallery{ --mnsw-lightbox-thumb:168px; }

.mnsw-lightbox--gallery-bottom .mnsw-lightbox__gallery{

    flex-direction:column;

}

.mnsw-lightbox--gallery-right .mnsw-lightbox__gallery{

    flex-direction:row;

}

.mnsw-lightbox__main{

    flex:1 1 auto;
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;

}

/*
 * O CONTENTOR e a referencia geometrica; o conteudo se adapta a ele.
 *
 * Com width:auto a caixa passava a depender das dimensoes intrinsecas
 * do elemento substituido, e dai vinham dois defeitos: uma imagem menor
 * que a area nunca crescia — a midia principal parecia curta demais —, e
 * um <video> mudava de tamanho ao iniciar a reproducao, porque ate os
 * metadados carregarem a caixa media o poster (ou os 300x150 do padrao)
 * e depois passava a medir o quadro do video. O aparecimento dos
 * controles nativos agrava o mesmo efeito.
 *
 * Ocupando integralmente a area destinada, a caixa deixa de depender do
 * conteudo: object-fit:contain preserva a proporcao, nao deforma e nao
 * recorta, e nem o Play nem a troca de midia produzem reflow.
 *
 * As declaracoes vencem .mnsw-lightbox__media — que continua valendo
 * para o Hero — por especificidade, e nao por ordem de fonte.
 */
.mnsw-lightbox__main img,
.mnsw-lightbox__main video,
.mnsw-lightbox__main iframe{

    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:12px;

}

.mnsw-lightbox__thumbs{

    flex:0 0 auto;
    display:flex;
    gap:8px;

}

/*
 * A faixa percorre no seu proprio eixo. Nenhum eixo e suprimido: o
 * contentor e dimensionado pelas proprias thumbnails, de modo que o
 * eixo transversal nao transborda, e a rolagem permanece sempre
 * disponivel — mesmo criterio da NAVIGATION-01 para o viewport do
 * Component.
 */
.mnsw-lightbox--gallery-bottom .mnsw-lightbox__thumbs{

    flex-direction:row;
    overflow:auto;

}

/*
 * Na faixa inferior a thumbnail e mais larga do que alta: quadrada, ela
 * lia como uma tira estreita ao lado de uma midia principal ampla. A
 * altura continua sendo exatamente thumbnail_size — a hierarquia dos
 * cinco niveis, o espacamento e a rolagem permanecem os mesmos —, e
 * somente a largura acompanha a proporcao.
 */
/*
 * A largura propria do layout bottom precisa vencer o reset de caixa
 * declarado adiante, que tambem e !important. Os dois modificadores
 * vivem no MESMO elemento — o overlay —, e por isso sao encadeados sem
 * espaco: o seletor sobe para tres classes e passa a frente do reset,
 * que tem duas. A apresentacao do layout bottom permanece exatamente a
 * mesma; muda apenas a forca da declaracao.
 */
.mnsw-lightbox.mnsw-lightbox--gallery-bottom .mnsw-lightbox__thumb{

    width:calc(var(--mnsw-lightbox-thumb) * 1.6) !important;

}

/*
 * Na faixa lateral o controle de fechar ocupa o canto superior direito
 * do overlay, exatamente sobre a primeira thumbnail: o recuo devolve a
 * primeira posicao da faixa, que de outro modo ficava coberta.
 */
.mnsw-lightbox--gallery-right .mnsw-lightbox__thumbs{

    flex-direction:column;

    /*
     * A rolagem permanece disponivel nos dois eixos: esconder um eixo
     * esta vedado neste arquivo por decisao da NAVIGATION-01, e nada
     * aqui impede rolagem alguma.
     */
    overflow:auto;

    /*
     * Reserva deterministica da barra vertical.
     *
     * Sem ela a faixa entrava num ciclo de layout: a largura nasce do
     * conteudo — a thumbnail —, o contentor de rolagem acrescenta a
     * barra vertical por fora, e no passo intermediario a largura
     * disponivel ficava menor do que a thumbnail. O navegador reservava
     * entao a calha de uma barra HORIZONTAL que nunca chega a ser
     * necessaria, e 15px da altura util ficavam ocupados por ela.
     * Medido: scrollWidth igual a clientWidth e, ainda assim, 15px
     * consumidos.
     *
     * Reservando a calha da barra vertical desde o inicio, o passo
     * intermediario deixa de existir e a calha horizontal nao nasce.
     * A correcao e geometrica: nenhum eixo e escondido, a rolagem
     * vertical continua igual e a thumbnail conserva integralmente o
     * thumbnail_size configurado. Navegador sem suporte simplesmente
     * ignora a declaracao e volta ao comportamento anterior.
     */
    scrollbar-gutter:stable;

    /*
     * Altura util do controle de fechar a partir do topo do contentor:
     * 10px de deslocamento, 36px de controle e uma folga. Medido, e nao
     * estimado — 44px ainda deixavam a primeira thumbnail 2px sob o
     * controle.
     *
     * O recuo e MARGEM, e nao padding: como padding ele vivia dentro do
     * scrollport e rolava junto com o conteudo, de modo que protegia a
     * primeira thumbnail apenas em repouso — rolada a faixa, uma
     * thumbnail voltava a passar por tras do controle. Como margem o
     * recuo pertence ao layout, fora da area percorrida: a faixa
     * comeca abaixo do controle e nenhuma thumbnail alcanca aquele
     * espaco, em qualquer posicao de rolagem.
     *
     * A caixa continua contida: o stretch do flex desconta as margens
     * do eixo transversal ao resolver a altura.
     */
    margin-top:52px;

}

.mnsw-lightbox__thumb{

    position:relative;
    flex:0 0 auto;
    box-sizing:border-box;
    background:transparent;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    opacity:.6;
    transition:opacity .2s ease;

}

/*
 * Reset de caixa contra as regras de button do tema hospedeiro, pelo
 * mesmo motivo — e no mesmo idioma — ja registrado no controle de
 * fechar, nos cards do Stories e no controle de audio: a thumbnail e um
 * <button>, e o tema alcanca todos eles.
 *
 * Aqui o conflito nao e de especificidade maior, e sim de EMPATE. O
 * runtime cria o elemento com type="button", entao ele casa com o
 * seletor de atributo [type="button"] — uma classe de especificidade,
 * exatamente como .mnsw-lightbox__thumb. Empate resolve por ordem de
 * fonte, e a folha do tema carrega depois da do plugin. Medido num tema
 * que declara:
 *
 *     [type="button"], button{ width:auto }
 *     [type="button"], button{ border:1px solid; padding:.5rem 1rem }
 *
 * O efeito era a largura virar auto e encolher ate padding + borda: uma
 * thumbnail configurada em 168px apresentava-se com 34px, e a faixa
 * inteira encolhia junto. O thumbnail_size configurado nao mudou em
 * momento algum — ele apenas deixava de ser aplicado.
 *
 * O prefixo do overlay resolve o empate e o !important sustenta o
 * resultado, tal como nos demais controles. A dimensao continua sendo
 * exclusivamente a do thumbnail_size, e nada aqui a altera.
 */
.mnsw-lightbox .mnsw-lightbox__thumb{

    width:var(--mnsw-lightbox-thumb) !important;
    height:var(--mnsw-lightbox-thumb) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;

}

.mnsw-lightbox__thumb:hover,
.mnsw-lightbox__thumb:focus-visible{

    opacity:1;

}

/*
 * A borda da thumbnail ativa e a cor de identidade da Section, pelo
 * mesmo criterio do controle de fechar: o chrome do overlay pertence ao
 * Accent. E a unica moldura que as thumbnails desenham — os demais
 * estados diferenciam-se por opacidade.
 */
.mnsw-lightbox__thumb.is-active{

    opacity:1;

}

/*
 * A moldura vive num PSEUDO-ELEMENTO, e nao em outline ou box-shadow,
 * por ordem de pintura.
 *
 * A imagem da thumbnail e absolutamente posicionada sobre inset:0 e,
 * como descendente posicionado de um elemento z-index:auto, e pintada
 * DEPOIS do outline do proprio elemento — encobrindo-o por inteiro.
 * Medido no navegador: mesmo um outline de 20px nao aparece, e
 * box-shadow:inset desaparece pelo mesmo motivo. Espessura nao resolve;
 * so resolve desenhar acima da imagem.
 *
 * Absolutamente posicionado, o pseudo-elemento nao participa do layout:
 * a caixa permanece exatamente a do thumbnail_size, as vizinhas nao se
 * deslocam e nada sofre reflow — o que preserva a correcao do Hover
 * Zoom. pointer-events:none mantem o clique pertencendo a thumbnail, e
 * o raio e herdado para acompanhar o recorte que ela ja aplica.
 */
.mnsw-lightbox__thumb.is-active::after{

    content:"";
    position:absolute;
    inset:0;
    border:4px solid var(--mnsw-accent-color, #1877F2);
    border-radius:inherit;
    pointer-events:none;
    z-index:3;

}

.mnsw-lightbox__thumb img,
.mnsw-lightbox__thumb-preview{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    border-radius:0;

}

.mnsw-lightbox__thumb-preview{

    z-index:1;

}

/*
 * Identidade da origem na thumbnail do Gallery: o icone do Provider —
 * ou do proprio Menu Card — no canto superior direito da propria
 * thumbnail, e nunca da pagina. Nao ocupa espaco no fluxo, nao altera
 * a proporcao da imagem e nao toca a faixa nem o seu espacamento.
 *
 * pointer-events:none preserva integralmente o clique da thumbnail,
 * pelo mesmo recurso que a pill do Media Carousel ja utiliza.
 *
 * O tamanho acompanha o da thumbnail, dentro de um intervalo que o
 * mantem pequeno e discreto nos cinco niveis de thumbnail_size.
 */
.mnsw-lightbox__thumb-icon{

    --mnsw-lightbox-thumb-icon:clamp(16px, calc(var(--mnsw-lightbox-thumb) * .22), 26px);

    position:absolute;
    z-index:2;
    top:5px;
    right:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--mnsw-lightbox-thumb-icon);
    height:var(--mnsw-lightbox-thumb-icon);
    border-radius:999px;

    /*
     * Fundo auxiliar exclusivamente de legibilidade sobre a imagem: a
     * cor do icone continua sendo a do Provider, sem substituicao.
     * Sem cor configurada permanece o branco do chrome do overlay — e
     * nunca o Accent, que e a cor da Section e nao a da origem.
     */
    background:rgba(0,0,0,.45);
    color:var(--mnsw-provider-color, #ffffff);
    pointer-events:none;

}

/*
 * Dashicons define 20px fixos de fonte e caixa; o icone da thumbnail
 * acompanha a caixa acima, pelo mesmo criterio ja adotado na pill de
 * metadata do Media Carousel.
 */
.mnsw-lightbox__thumb-icon i{

    font-size:calc(var(--mnsw-lightbox-thumb-icon) * .62);
    width:auto;
    height:auto;
    line-height:1;

}

/*
 * Os efeitos de animacao do Gallery pertencem a Capability motion
 * (D-19) e por isso sao declarados junto das demais materializacoes de
 * Motion, no feed.css — inclusive a sua supressao sob
 * prefers-reduced-motion. Nenhuma animacao nova existe: as ja
 * declaradas sao reutilizadas.
 */

/*
 * Este arquivo nao declara media queries, por decisao ja registrada
 * pela RESPONSIVE-01: a adaptacao e intrinseca — flex, clamp e
 * max-width —, nunca por faixa de janela. As laterais do Stories
 * acompanham a largura pelo proprio clamp, e a faixa de thumbnails
 * percorre no seu eixo quando a largura nao a comporta.
 */

/*
 * Wrapper de midia do Feed para as experiencias de zona (DD-128):
 * reset estrutural para que <a>, <button> e <span> envolvam a imagem
 * sem alterar o layout do card. Segue o mesmo padrao de reset do
 * .mnsw-media-carousel-item__viewer.
 *
 * Somente o ramo do Viewer e um <button>, e era o unico a apresentar
 * espaco interno na imagem: appearance mantinha o chrome nativo de
 * push-button, cujo recuo horizontal sobrevive a padding:0, e regras
 * de button do tema hospedeiro — tipicamente de especificidade maior
 * que uma classe — reintroduziam caixa e sombra. Com o reset completo
 * os tres ramos apresentam exatamente a mesma area de midia.
 *
 * As propriedades que definem a caixa da imagem sao declaradas como
 * !important, seguindo o mesmo recurso ja adotado pelo
 * .mnsw-media-carousel-item__viewer. A razao e geometrica, nao
 * estetica: sem isso o reset venceria o tema hospedeiro apenas nos
 * seletores de estado, de especificidade maior, e a imagem mudaria de
 * tamanho ao passar o mouse — crescendo ate a area correta e levando
 * a altura do Card junto. Com a mesma forca em todos os estados a
 * imagem permanece sempre na area final definida pelo Image Padding e
 * nenhuma transicao do tema tem o que animar.
 *
 * O bloco de estado abaixo trata exclusivamente do que nao afeta
 * geometria, para que o wrapper permaneca invisivel sem reintroduzir
 * qualquer diferenca de tamanho ou posicao entre os estados.
 *
 * O contorno de foco nao e removido: a navegacao por teclado depende
 * dele e ele nao participa do espaco interno da imagem.
 */
.mnsw-media-link{

    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;

    /*
     * Mesma protecao do __viewer acima: o wrapper e a camada atras da
     * imagem do Card, e o fundo do Card (Surface) deve continuar sendo
     * o que aparece atraves de transparencias e areas descobertas —
     * nunca uma cor de button do tema hospedeiro.
     */
    background:transparent !important;
    color:inherit;
    font:inherit;
    text-align:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:none;
}

.mnsw-media-link:hover,
.mnsw-media-link:focus,
.mnsw-media-link:focus-visible,
.mnsw-media-link:active{

    background:transparent !important;
    box-shadow:none;
}


/*
 * Hover Zoom no Media Carousel (MOTION-01).
 *
 * A caixa de recorte e o proprio elemento clicavel do item, que contem
 * exclusivamente a imagem e ja e o contexto de posicionamento do
 * indicador de midia. Recortar ali confina a imagem ampliada a area
 * original do item: o item nao cresce, nao se desloca e os vizinhos
 * permanecem no mesmo lugar, porque transform nao participa do fluxo.
 *
 * Neste Component o raio e a sombra sao declarados na imagem. Sob
 * recorte a sombra externa seria cortada e os cantos arredondados
 * ficariam fora da area visivel; por isso, e apenas neste modo, ambos
 * passam a ser declarados na caixa de recorte e retirados da imagem. A
 * apresentacao final e a mesma — muda apenas o elemento que a declara.
 *
 * O reset de estado do wrapper zera o raio em hover, foco e clique; as
 * regras abaixo o reafirmam com especificidade maior, sem alterar
 * aquele bloco.
 *
 * A sombra exige !important pela mesma razao que o reset o exige: o
 * bloco base declara box-shadow:none !important para que nenhuma
 * sombra de button do tema hospedeiro apareca atras da imagem, e
 * especificidade nao vence !important. A sombra reposta aqui e a do
 * proprio produto, a mesma que a imagem declarava antes do recorte.
 */
.mnsw-motion-zoom .mnsw-media-carousel-item__viewer,
.mnsw-motion-zoom .mnsw-media-carousel-item__viewer:hover,
.mnsw-motion-zoom .mnsw-media-carousel-item__viewer:focus,
.mnsw-motion-zoom .mnsw-media-carousel-item__viewer:focus-visible,
.mnsw-motion-zoom .mnsw-media-carousel-item__viewer:active{

    overflow:hidden;
    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-card-radius, 14px));
    box-shadow:var(--mnsw-card-shadow, 0 10px 25px rgba(0,0,0,.08)) !important;

}

.mnsw-motion-zoom .mnsw-media-carousel-item__viewer .mnsw-media-carousel-item__image{

    box-shadow:none;

}

.mnsw-motion-zoom .mnsw-media-carousel-item__viewer:hover .mnsw-media-carousel-item__image,
.mnsw-motion-zoom .mnsw-media-carousel-item__viewer:focus-visible .mnsw-media-carousel-item__image{

    transform:scale(1.06);

}


/*
 * Skeleton do Media Carousel (SNAPSHOT-03).
 *
 * A imagem do item e a unidade visual deste Component: o bloco neutro
 * reproduz a sua proporcao e o seu raio a partir das mesmas variaveis
 * que o Theme ja emitiu. A largura do item vem do proprio contentor,
 * reutilizado sem alteracao.
 *
 * As primitivas partilhadas — pulso, linhas e blocos — vivem no
 * feed.css, pelo mesmo criterio ja adotado pelo indicador de midia.
 */
.mnsw-skeleton__image{

    width:100%;
    aspect-ratio:var(--mnsw-image-ratio, 1);
    border-radius:var(--mnsw-card-radius, 14px);

}

.mnsw-skeleton__line--caption{

    margin:10px 0 0;
    width:80%;

}


/*
 * Show Scrollbar do Media Carousel (NAVIGATION-01): esconde apenas a
 * apresentacao visual da barra — nunca a rolagem. Mesma tecnica ja
 * adotada pelo Feed: scrollbar-width e a propriedade padrao e a
 * pseudo-classe -webkit cobre as versoes anteriores a sua adocao.
 * overflow-x:hidden jamais e utilizado aqui: cortaria o conteudo.
 */
.mnsw-media-carousel--no-scrollbar{

    scrollbar-width:none;

}

.mnsw-media-carousel--no-scrollbar::-webkit-scrollbar{

    display:none;

}

/*
 * Horizontal Navigation (NAVIGATION-01).
 *
 * Chrome compartilhado pelas duas experiencias — Feed e Media Carousel
 * —, declarado aqui pelo mesmo motivo que .mnsw-media-link e o
 * .mnsw-lightbox: este arquivo ja e o lugar do chrome comum de
 * apresentacao, e e enfileirado incondicionalmente no front-end.
 *
 * As classes com -- declaram a configuracao vinda do servidor; as
 * classes com is- representam estado de runtime, seguindo o precedente
 * de .mnsw-feed--single-line e de .is-expanded.
 *
 * O wrapper nao declara overflow: recortaria a sombra dos Cards.
 */
.mnsw-nav{

    position:relative;

    /*
     * Espaco vertical ocupado pela faixa de dots. Fonte unica do
     * numero, consumida pelo alinhamento das setas abaixo: sem os
     * dots o valor e zero e as setas centram-se contra o viewport.
     */
    --mnsw-nav-dots-space:0px;

}

/*
 * O espaco reservado a faixa de indicadores acompanha o estado efetivo
 * de runtime, e nao a configuracao declarada pelo servidor
 * (RESPONSIVE-01). Com a Navigation por faixa de largura, a classe
 * .mnsw-nav--dots declara apenas a configuracao de Desktop; o modo em
 * vigor pode ser outro. A classe is- e alternada pelo controlador
 * conforme a faixa corrente, seguindo a convencao declarada acima.
 */
.mnsw-nav.is-dots{

    /* 10px de altura do dot + 12px de afastamento da faixa. */
    --mnsw-nav-dots-space:22px;

}

/*
 * As setas sao posicionadas sobre as bordas do wrapper e nao
 * participam do fluxo. A razao e aritmetica, nao estetica: se
 * ocupassem largura, alterariam o clientWidth do viewport e com ele o
 * proprio vetor de posicoes de navegacao.
 *
 * O reset segue o mesmo recurso ja adotado pelo wrapper de midia do
 * Card, pela mesma razao: regras de button do tema hospedeiro tem
 * especificidade maior que uma classe unica e reintroduziriam caixa,
 * fundo e sombra.
 *
 * O contorno de foco nao e removido: estes sao controles reais,
 * operaveis por teclado, e a navegacao depende dele.
 */
.mnsw-nav__arrow{

    position:absolute;
    top:0;
    bottom:var(--mnsw-nav-dots-space);
    z-index:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px !important;
    height:36px;
    min-width:0;
    padding:0 !important;

    /*
     * Centralizacao vertical sem transformacao alguma: a caixa e
     * absoluta entre o topo do wrapper e a faixa de dots, e as
     * margens automaticas no eixo vertical resolvem o resto. Este
     * arquivo nao declara transformacoes.
     */
    margin:auto 0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.55) !important;
    color:#ffffff !important;
    font:inherit;
    line-height:1;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;

}

.mnsw-nav__arrow:hover,
.mnsw-nav__arrow:focus,
.mnsw-nav__arrow:focus-visible,
.mnsw-nav__arrow:active{

    border:0 !important;
    background:rgba(0,0,0,.75) !important;
    color:#ffffff !important;
    box-shadow:none !important;

}

/*
 * Nas extremidades a seta permanece no lugar e apenas muda de estado:
 * oculta-la deslocaria o layout a cada rolagem.
 */
.mnsw-nav__arrow[disabled]{

    opacity:.35;
    cursor:default;

}

.mnsw-nav__arrow[disabled]:hover{

    background:rgba(0,0,0,.55) !important;

}

.mnsw-nav__arrow--prev{

    left:4px;

}

.mnsw-nav__arrow--next{

    right:4px;

}

/*
 * Dashicons define 20px fixos de fonte e caixa; o icone da seta herda
 * a caixa do botao para permanecer centrado em qualquer conjunto.
 */
.mnsw-nav__arrow i{

    font-size:20px;
    width:auto;
    height:auto;
    line-height:1;

}

.mnsw-nav__dots{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:10px;
    margin:12px 0 0;

}

.mnsw-nav__dot{

    display:block !important;
    width:10px !important;
    height:10px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.25) !important;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;

}

.mnsw-nav__dot.is-active{

    background:var(--mnsw-accent-color, #1877F2) !important;

}

/*
 * PRESENTATION-01 — Tipografia do Media Carousel.
 *
 * O Component nao possui marcacao de classificacao e nao passa a
 * possuir: nenhuma regra dessa natureza existe neste arquivo.
 */
.mnsw-media-carousel-item{

    font-family:var(--mnsw-font-family, inherit);

}

/*
 * Description Size: escala do unico texto do item sem tamanho proprio. A
 * data acompanha o Image Size por --mnsw-carousel-meta e permanece
 * sem controle independente.
 */
.mnsw-media-carousel-item__title{

    font-size:calc(1em * var(--mnsw-caption-scale, 1));

    /*
     * Description Align: o fallback left reproduz o alinhamento que
     * o Component ja praticava, entao sem configuracao nada muda.
     */
    text-align:var(--mnsw-description-align, left);

}

/*
 * Metadata do Story central: Provider, data e hora.
 *
 * O conteudo e uma copia do elemento que o proprio Component produziu a
 * partir das capabilities de conteudo da Section — nada e decidido aqui,
 * e por isso as regras abaixo governam apenas posicao.
 *
 * Fica acima do card central e centralizada em relacao ao palco,
 * seguindo a mesma referencia de altura que a faixa de progresso ja
 * utiliza.
 */
.mnsw-lightbox__meta{

    position:absolute;
    z-index:5;
    top:calc(50% - min(var(--mnsw-stories-card-h), 100% - var(--mnsw-stories-audio)) / 2 - 34px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    pointer-events:none;

}

.mnsw-lightbox__meta[hidden]{

    display:none;

}

/*
 * A pill do Card e posicionada de forma absoluta sobre a sua midia. Aqui
 * ela ja chega dentro de um contentor posicionado, e por isso volta ao
 * fluxo — a apresentacao (fundo, raio, cor, icone) permanece a que o
 * Component definiu.
 */
.mnsw-lightbox__meta .mnsw-media-carousel-item__date,
.mnsw-lightbox__meta .mnsw-card-date{

    position:static;
    transform:none;
    top:auto;
    left:auto;

}

/*
 * Icone do Provider na metadata do Stories: recebe a cor do proprio
 * Provider, emitida pelo item na variavel que o Feed ja utiliza. Sem
 * cor configurada permanece o branco da pill.
 *
 * A regra vale dentro do Lightbox; data e hora nao sao alcancadas e
 * mantem a cor que a pill ja lhes da.
 */
.mnsw-lightbox__meta .mnsw-media-carousel-item__date i,
.mnsw-lightbox__meta .mnsw-card-date i{

    color:var(--mnsw-provider-color, inherit);

}

/* ---------------------------------------------------------------
 * Image Padding do Media Carousel
 *
 * Espaco interno ao redor da area da imagem, em dois eixos
 * independentes. Nao toca a largura do item — governada pelo Image
 * Size, que continua sendo o --mnsw-carousel-item.
 *
 * Sem as variaveis o padding e 0 e a apresentacao e exatamente a
 * atual. As regras vivem sob as classes do Media Carousel e nao
 * alcancam Feed, Viewer ou Lightbox.
 * --------------------------------------------------------------- */
.mnsw-media-carousel-item .mnsw-media-carousel-item__viewer{

    /*
     * O espaco do Image Padding vive como MARGEM do viewer, e nao como
     * padding: assim o viewer abraca exatamente a caixa da imagem e
     * pode carregar a Image Border — que precisa morar aqui, na caixa
     * de recorte do Hover Zoom, que nunca sofre transform. Era a borda
     * na propria imagem que escalava com o zoom e sumia para fora do
     * card. A geometria resultante e identica a anterior.
     *
     * O !important da borda vence o border:0 !important do reset
     * estrutural do proprio viewer, pelo recurso ja documentado ali.
     */
    margin:var(--mnsw-carousel-media-padding-y, 0) var(--mnsw-carousel-media-padding-x, 0);
    width:auto;

    /*
     * O padding fica cravado em zero: regras de button do kit do tema
     * hospedeiro — de especificidade classe+elemento — venciam o
     * padding:0 de classe unica da regra base e encolhiam a imagem
     * dentro do viewer. Duas classes bastam para vencer sem !important;
     * o Magazine ja faz o mesmo com a forca propria.
     */
    padding:0;
    border:var(--mnsw-image-border, 0) solid var(--mnsw-accent-color, #1877F2) !important;
    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-card-radius, 14px));
    box-sizing:border-box;
    overflow:hidden;

}


/*
 * Circular geometrico: com a classe emitida pelo Theme, o circulo e
 * garantido com forca propria contra qualquer proporcao ou altura
 * imposta por regra externa. O Oval permanece nas variaveis.
 */
.mnsw-media-carousel--shape-circle .mnsw-media-carousel-item__image{

    aspect-ratio:1 / 1 !important;
    height:auto !important;
    border-radius:50% !important;

}

.mnsw-media-carousel--shape-circle .mnsw-media-carousel-item__viewer{

    border-radius:50% !important;

}