.story-gradient,.story-loader-container,.video-progress-list {
    max-width: 348px;
    position: absolute
}

.story-loader-container {
    display: flex;
    justify-content: center;
    width: 100%
}

.story-loader {
    animation: spin 2s linear infinite;
    border: 2px solid #d8d8d8;
    border-radius: 50%;
    border-top-color: #6a6a6a;
    height: 15px;
    width: 15px
}

.stories-image-container {
    align-items: center;
    display: flex;
    height: 90px !important;
    width: 90px !important;
    padding: 4px !important;
    
}

.addBorderContainer{
    border-radius: 50%;
    border:4px solid #ff732f;
}

.stories-main {
    -webkit-touch-callout: none;
    bottom: 20px !important;
    left: 20px !important;
    height: 90px;

    outline: 0;
    position: fixed;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 101
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.stories-main {
    flex-direction: column;
    justify-content: center
}

.stories-modal-container,.story-modal {
    height: 100%;
    overflow: hidden;
    width: 100%
}

.stories-modal-container {
    background: rgba(38,42,51,.8);
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 9999
}

.story-modal-content {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%
}

/* Vídeo de LINK (YouTube/Vimeo, iframe #storyEmbed) é widescreen — não pode usar a
   mesma caixa vertical (100vh/348px) pensada pra Stories verticais. Sem isso, o player
   do YouTube ficava espremido numa coluna alta e estreita, mostrando a barra do canal
   em cima e o player cortado embaixo (achado 19/09/2026, reportado pelo Gabriel com
   print de produção). Seletor com #id pra sobrepor .story-video sem precisar de
   !important. */
/* Wrapper próprio (position:relative) do iframe do YouTube + as máscaras abaixo — não usa
   `.story-video-box` (o pai "real" da árvore) porque ele DE PROPÓSITO não tem position própria
   (ver comentário grande mais abaixo sobre `.video-progress-list`); dar position a ele mudaria a
   referência de `position:absolute` de outros elementos já calibrados (barra de progresso, botão
   fechar). As dimensões (largura/altura/aspect-ratio) moram AQUI, no wrapper — não no iframe
   filho — porque um `display:inline-block` sem width própria não repassa `max-width:100%` do
   breakpoint mobile de forma confiável pro filho (achado 23/09/2026: vídeo saía pequeno/errado
   no mobile na 1ª tentativa, com a regra no iframe). O iframe só preenche 100% do wrapper. */
.story-embed-frame {
    position: relative;
    height: auto;
    width: min(90vw, 800px);
    max-width: min(90vw, 800px);
    max-height: 80vh;
    aspect-ratio: 16 / 9;
    background-color: #000;
}
#storyEmbed.story-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    background-color: transparent;
    /* Achado 23/09/2026: com os controles nativos do YouTube escondidos (controls=0, ver
       site/lib/dados.php), não sobra nenhuma interação própria pra preservar dentro do iframe —
       clique passa direto pro .story-video-box por trás, que já trata tap esquerda/direita como
       anterior/próximo (igual ao vídeo enviado, sem esse pointer-events o clique era capturado
       pelo player do YouTube em vez de navegar entre os stories). */
    pointer-events: none;
}

/* Achado 23/09/2026 (Gabriel, mesma tarefa): mesmo com controls=0 (esconde a barra de controles
   inteira do YouTube), sobra o cartão de "vídeos sugeridos" + marca do YouTube (aparece se o
   autoplay não pegar/vídeo pausar) e o balão de título+canal (aparece nos primeiros segundos de
   qualquer vídeo, mesmo tocando normalmente) — nenhum parâmetro de URL remove os dois
   (`modestbranding` foi descontinuado pelo próprio YouTube em 2018). Únicas áreas onde esse cromo
   aparece; cobertas com a MESMA cor de fundo do vídeo (#000) pra ficar visualmente idêntico ao
   vídeo enviado. `pointer-events:none` — não tira a interação por baixo (já é none no iframe). */
.story-embed-mask {
    position: absolute;
    background: #000;
    pointer-events: none;
}
/* Faixa cheia (100% da largura), não só o canto — testado na prática (23/09/2026): a posição
   exata de cada elemento (balão de título, ícone de "ativar som" do autoplay mudo, cartão de
   sugestões) varia demais pra acertar com retângulos pontuais nos cantos; cobrir a FAIXA toda
   de cima/baixo é a única forma robusta de garantir que nada escapa, em qualquer resolução. */
.story-embed-mask--top {
    top: 0;
    left: 0;
    width: 100%;
    height: 16%;
}
.story-embed-mask--bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
}

/* Vídeo ENVIADO pelo sistema (#storyVideo, <video> nativo) tinha o MESMO problema — a
   suposição original era que todo vídeo carregado seria vertical (tipo Stories do
   Instagram), mas vídeo de imóvel é filmado em paisagem na prática. Corrigido em
   21/09/2026 (achado pelo Gabriel em produção): mesma caixa flexível do YouTube, mas
   sem `aspect-ratio` fixo (não temos como saber a proporção real de antemão) — o
   `object-fit: contain` deixa o vídeo se encaixar sem cortar nem esticar, seja ele
   paisagem ou retrato. */
#storyVideo.story-video {
    height: auto;
    width: min(90vw, 800px);
    max-height: 80vh;
    max-width: min(90vw, 800px);
    background-color: #000;
    object-fit: contain;
}

.story-close {
    color: #fff;
    float: right;
    font-size: 35px
}

.story-close:focus,.story-close:hover {
    cursor: pointer;
    text-decoration: none
}

.no-scroll {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%
}

.story-icons {
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    margin-right: 10px;
    max-width: 348px;
    position: absolute;
    bottom: 20%;
}

.story-icons div {
    background: hsla(0,0%,82%,.7);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    height: 40px;
    padding: 5px;
    text-align: center;
    width: 40px;
    z-index: 9999
}

.story-icons div svg {
    height: 38px;
    width: 19px;
    color:#000 !important;
}

.story-icons .add-to-cart,.story-icons .liked {
    fill: transparent;
    stroke: #000
}

.like-clicked {
    fill: red!important;
    stroke: red!important
}

.bag-clicked {
    fill: #000!important;
    stroke: #000!important
}

.hearts {
    height: 25%;
    min-height: 250px;
    position: absolute
}

.heart {
    background-color: red;
    height: 10%;
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>');
    -webkit-mask-position: bottom;
    mask-position: bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    min-height: 25px;
    min-width: 25px;
    width: 20%
}

.hearts .heart {
    left: 50%;
    opacity: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%,25vh) scale(0)
}

.hearts .heart-animation {
    animation: bubbleUp 1.5s ease-in-out
}

.hearts div {
    animation: oscillate 4s ease-in-out infinite;
    transform: translateX(12.5vw) rotate(25deg)
}

.hearts div:nth-child(2) {
    animation-delay: .5s
}

.hearts div:nth-child(2) .fa,.hearts div:nth-child(3) {
    animation-delay: 1s
}

.hearts div:nth-child(3) .fa {
    animation-delay: 2s
}

.hearts div:nth-child(4) {
    animation-delay: 1.5s
}

.hearts div:nth-child(4) .fa {
    animation-delay: 3s
}

@keyframes bubbleUp {
    50% {
        opacity: 1
    }

    to {
        transform: translate(-50%,-25vh) scale(2)
    }
}

@keyframes oscillate {
    50% {
        transform: translateX(-12.5vw) rotate(-25deg)
    }
}

@keyframes floating-heart {
    0% {
        bottom: 0;
        left: 0;
        opacity: 0
    }

    10% {
        bottom: 20%;
        left: 70%;
        opacity: 1
    }

    20% {
        bottom: 40%;
        left: 10%
    }

    30% {
        bottom: 60%;
        left: 50%
    }

    40% {
        bottom: 80%;
        left: 5%;
        opacity: 1
    }

    48% {
        bottom: 100%;
        left: 60%;
        opacity: 0
    }

    to {
        bottom: 100%;
        left: 90%;
        opacity: 0
    }
}

.icon-animate {
    animation-duration: 1s;
    animation-name: like-heart-animation;
    animation-timing-function: ease-in-out
}

@keyframes like-heart-animation {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    15% {
        opacity: .9;
        transform: scale(1.2)
    }

    30% {
        transform: scale(.95)
    }

    45%,80% {
        opacity: .9;
        transform: scale(1)
    }
}

.story-video {
    background-color: #000;
    height: 100vh;
    max-width: 348px
}

.story-video-box,.video-controller {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    z-index: 99999
}

.video-controller {
    height: 30px;
    margin-right: 15px;
    max-width: 348px;
    padding: 2px;
    position: absolute;
    top: 20px;
    width: 30px;
    width: 100%
}

/* .story-video-box (pai real) não tem `position` própria, então esta barra (position:absolute)
   sempre se posicionou relativa ao .stories-modal-container — o overlay INTEIRO da tela, não o
   vídeo. Com o vídeo pequeno (348px) de antes isso não aparecia (a barra, de mesma largura
   348px, ficava por acaso perto dele); com o vídeo maior (800px) a barra ficou "flutuando"
   deslocada, cobrindo só um pedaço dele (achado 22/09/2026, reportado pelo Gabriel em
   produção). Corrigido centralizando de verdade (left:50%/translateX) e casando a largura
   máxima com a do próprio vídeo, em vez de depender de um pai que não é o vídeo. */
.video-progress-list {
    display: flex;
    justify-content: center;
    padding: 0 10px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: min(90vw, 800px);
    z-index: 99999
}

/* ACHADO (22/09/2026): era um <progress> nativo com track e fill ambos `background-color:#fff`
   — sem contraste nenhum entre trilho e preenchimento (o navegador pinta a barra inteira de
   branco desde o início, `value=0` ou `value=100` ficam visualmente idênticos). Convertido pra
   2 <div>s (trilho semi-transparente + preenchimento sólido) — junto com a troca de mecanismo de
   animação (ver comentário em pescaraStoriesVideos.js), corrige tanto o contraste quanto a
   suavidade num só lugar: div comum repinta pelo pipeline normal de CSS, sem as limitações de
   repintura do elemento nativo `<progress>`. */
.video-progress-item {
    background-color: rgba(255, 255, 255, .35);
    border-radius: 2px;
    height: 2px;
    margin: 0 2px;
    top: 10px;
    width: 100%;
    overflow: hidden
}

.video-progress-fill {
    background-color: #fff;
    height: 100%;
    width: 0%
}

.div-disabled {
    pointer-events: none
}

/* Mesmo bug/fix da barra de progresso (ver comentário acima em .video-progress-list): o
   `.story-gradient` compartilha a regra base `max-width:348px` (topo do arquivo) e o mesmo
   `.story-video-box` sem `position` própria — ficava "preso" nos 348px antigos mesmo depois
   do vídeo crescer pra até 800px (achado 22/09/2026, reportado pelo Gabriel: "a barra de
   progresso está acompanhando o tamanho do vídeo, mas o degradê não"). Mesma correção:
   centraliza de verdade e casa a largura máxima com a do vídeo. */
.story-gradient {
    background: linear-gradient(180deg,rgba(0,0,0,.6),transparent);
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: min(90vw, 800px)
}

.story-circle {
    height: 90px;
    position: relative;
    width: 90px
}

.story-icon,.story-loader {
    position: absolute
}



.story-svg {
    fill: none;
    stroke: #ff732f;
    stroke-linecap: round;
    stroke-width: 4;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: stroke-draw 6s ease-out 2 alternate;
    max-height: 100%!important;
    top: 10px !important;
}

.story-icon {
    background-color: #000;
    border-radius: 50%;
    cursor: pointer;
    height: 75px !important;
    left: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 75px !important;
    z-index: 101 !important;
    max-width: inherit !important;
    /* border: 3px solid #000; */
}

@keyframes stroke-draw {
    0% {
        border-style: dashed;
    }

    to {
     
        transform: rotate(180deg)
    }
}

.story-title {
    display: flex;
    justify-content: center
}

.story-title span {
    color: #262626;
    font-size: 13px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.story-video-error {
    color: #fff;
    display: none;
    position: absolute
}

.smooth-hide {
    opacity: 0;
    transition: opacity .5s ease-in-out
}

.smooth-show {
    opacity: 1;
    transition: opacity .3s ease-in-out
}

.added-to-cart-message-container {
    display: flex;
    justify-content: center;
    max-width: 348px;
    position: absolute;
    width: 100%
}

.added-to-cart-message {
    background-color: #fe4155;
    border-radius: 3px;
    bottom: 100px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
    padding: 15px 30px;
    position: fixed;
    z-index: 99999
}

.added-to-cart-message__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.added-to-cart-message__content__text {
    color: #fff;
    font-size: 16px
}

@keyframes animate-stories-main-title {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 0;
        transform: translateX(-100%)
    }
}

.story-main-title {
    background-color: #ff732f;
    border-radius: 20px;
    max-height: 45px;
    min-height: 45px;
    transition: width 1.25s ease;
    width: 0;
    position: absolute !important;
    left: 94px !important;
}

.story-main-title span {
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 400;
    opacity: 0;
    padding: 10px 20px;
    transition: color 3s ease
}

@keyframes opacity {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes width {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

.product-info {
    background: linear-gradient(0deg,rgba(0,0,0,.5),transparent);
    bottom: 0px !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: auto;
    justify-content: center;
    max-width: 340px;
    padding: 0 20px 20px;
    position: absolute;
    width: 100%;
    font-size: 14px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    
}

.product-info .product-image {
    border-radius: 10px;
    height: 100%;
    max-height: 60px;
    max-width: 60px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.product-info .product-image img {
    border-radius: 5px;
    max-height: 60px;
    max-width: 60px;
}

.product-details {
    align-items: end;
    color: #fff;
    display: flex;
    justify-content: space-between
}

.product-details .product-name {
    width: 75%
}

.product-details .product-price {
    text-align: end;
    width: 25%
}

.d-none {
    display: none
}

/* Setas de navegação (24/09/2026, pedido do Gabriel: "não tem como pular pro próximo, não tem
   as setinhas") — mesmo hack de centralização já usado por `.video-progress-list`/
   `.video-controller` (`.story-video-box`, o pai "real", não tem `position` própria de
   propósito): `left:50%/translateX(-50%)` + `max-width` casado com o vídeo, em vez de
   `position:relative` nele (mudaria a referência de tudo que já depende do comportamento
   atual). `pointer-events:none` no wrapper + `auto` só nos botões — a área entre as setas
   continua livre pro tap esquerda/direita de sempre (não veio pra substituir, só dar uma pista
   visual de que dá pra navegar). */
.story-nav-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: min(90vw, 800px);
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 99999;
    pointer-events: none;
}
.story-nav {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s ease;
}
.story-nav:hover {
    background: rgba(0, 0, 0, .7);
}

@media (max-width: 961px) {
    .story-video,.video-progress-list,.story-embed-frame,.story-nav-wrap {
        max-width:100%
    }

    .story-nav {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .story-gradient,.video-progress-list {
        max-width: 100%;
        width: 100%!important
    }

    .stories-main {
        bottom: 20px
    }

    .story-circle {
        height: 100px;
        width: 100px
    }

    .story-icons {
        margin: 0;
        max-width: 100%;
        right: 10px;
        top: 20px
    }

    .added-to-cart-message {
        bottom: 50px
    }

    .video-controller {
        max-width: 100%
    }

    .story-circle {
        display: flex;
        flex-direction: column
    }

    .story-icon {
        height: 75px  !important;
        bottom: 20px !important;
        width: 75px !important
    }

    .product-info {
        max-width: 100%
    }

    .stories-modal-container {
        background: #000
    }

    .story-loader-container {
        max-width: 100vw;
        width: 100vw
    }

    .story-video-box {
        justify-content: center
    }
}