/* ============================================================================
   SR LOJA | SANDRA INDICA — VITRINE PÚBLICA
   Versão: 1.4.0
   Mantidos: banner, categorias, cards, âncoras e carrossel.
   Novo: janela de recomendações com assinatura da Sandra.
   ============================================================================ */

.sr-vitrine {
    --sr-rosa:#a64c70;
    --sr-texto:#40333a;
    --sr-fundo:#fff9f8;
    box-sizing:border-box;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:16px 18px 70px;
    color:var(--sr-texto);
    font-family:inherit
}

.sr-vitrine * {
    box-sizing:border-box
}

/* Cabeçalho */
.sr-vitrine-hero {
    text-align:center;
    background:linear-gradient(125deg,#fff1f1,#f7eaf1);
    padding:55px 24px;
    border-radius:22px;
    margin-bottom:30px
}

.sr-vitrine-selo,.sr-vitrine-titulo>span {
    color:var(--sr-rosa);
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700
}

.sr-vitrine-hero h1 {
    font-size:clamp(2rem,4vw,3.3rem);
    line-height:1.15;
    margin:13px 0;
    color:#703b52
}

.sr-vitrine-hero p {
    font-size:1.05rem;
    max-width:610px;
    margin:0 auto;
    line-height:1.7
}

/* Categorias */
.sr-vitrine-categorias {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:28px
}

.sr-vitrine-categoria {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-width:0;
    min-height:0;
    padding:12px 12px 11px;
    background:#fff;
    border:1px solid #efdee4;
    border-radius:16px;
    text-decoration:none!important;
    color:var(--sr-texto)!important;
    box-shadow:0 4px 20px #3e26320a;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}

.sr-vitrine-categoria::before {
    display:block;
    font-size:1.75rem;
    line-height:1.1;
    margin-bottom:7px
}

.sr-vitrine-categoria:nth-child(1) {
    background:linear-gradient(145deg,#eee0fc,#e1cdf5);
    border-color:#d6bde9
}

.sr-vitrine-categoria:nth-child(1)::before {
    content:'📖'
}

.sr-vitrine-categoria:nth-child(2) {
    background:linear-gradient(145deg,#ffe2eb,#f6cedc);
    border-color:#eebaca
}

.sr-vitrine-categoria:nth-child(2)::before {
    content:'🎁'
}

.sr-vitrine-categoria:nth-child(3) {
    background:linear-gradient(145deg,#e7f5d9,#d5eac5);
    border-color:#c5deb5
}

.sr-vitrine-categoria:nth-child(3)::before {
    content:'🌿'
}

.sr-vitrine-categoria:nth-child(4) {
    background:linear-gradient(145deg,#ffedcf,#f7dfb9);
    border-color:#ebd0a7
}

.sr-vitrine-categoria:nth-child(4)::before {
    content:'🏠'
}

.sr-vitrine-categoria:nth-child(5) {
    background:linear-gradient(145deg,#d9efff,#c7e3f7);
    border-color:#b5d6ed
}

.sr-vitrine-categoria:nth-child(5)::before {
    content:'🎓'
}

.sr-vitrine-categoria:hover {
    transform:translateY(-4px);
    border-color:#ce91a8;
    box-shadow:0 9px 24px rgba(62,38,50,.12)
}

.sr-vitrine-categoria:focus-visible {
    outline:3px solid var(--sr-rosa);
    outline-offset:3px
}

.sr-vitrine-categoria-nome {
    font-size:1rem;
    font-weight:750;
    line-height:1.3;
    color:#713d55
}

.sr-vitrine-categoria small {
    font-size:.79rem;
    line-height:1.45;
    margin-top:6px;
    color:#75656d
}

.sr-vitrine-seta {
    font-size:1.25rem;
    line-height:1;
    color:var(--sr-rosa);
    align-self:flex-end;
    margin-top:8px
}

/* Seções */
.sr-vitrine-secao {
    margin:0 0 52px;
    scroll-margin-top:90px
}

.sr-vitrine-titulo {
    margin-bottom:14px
}

.sr-vitrine-titulo h2 {
    font-size:clamp(1.5rem,3vw,2rem);
    margin:6px 0 0;
    color:#703b52
}

/* Cards */
.sr-vitrine-grade {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px
}

.sr-vitrine-produto {
    display:flex;
    flex-direction:column;
    min-width:0;
    background:#fff;
    border:1px solid #f0e3e7;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 5px 22px #3e26320b
}

.sr-vitrine-imagem {
    width:100%;
    aspect-ratio:1/1;
    height:auto;
    background:var(--sr-fundo);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}

.sr-vitrine-foto {
    display:block;
    width:100%;
    height:100%!important;
    object-fit:contain;
    padding:10px
}

.sr-vitrine-sem-foto {
    font-size:.9rem;
    color:#99848c
}

.sr-vitrine-produto-conteudo {
    padding:19px;
    display:flex;
    flex-direction:column;
    flex:1
}

.sr-vitrine-produto h3 {
    font-size:1.08rem;
    line-height:1.4;
    margin:0 0 9px;
    color:#573a48
}

.sr-vitrine-produto p {
    font-size:.9rem;
    line-height:1.6;
    margin:0 0 15px;
    color:#6e6067;
    flex:1
}

.sr-vitrine-preco {
    font-size:1.16rem;
    font-weight:750;
    color:#713d55;
    margin-bottom:14px
}

.sr-vitrine-botao {
    display:block;
    width:100%;
    text-align:center;
    margin-top:auto;
    background:var(--sr-rosa);
    border:0;
    border-radius:9px;
    padding:11px 12px;
    color:#fff!important;
    text-decoration:none!important;
    font-family:inherit;
    font-weight:650;
    font-size:.9rem;
    line-height:1.5;
    cursor:pointer
}

.sr-vitrine-botao:hover {
    background:#853857
}

.sr-vitrine-botao:focus-visible {
    outline:3px solid #703b52;
    outline-offset:3px
}

.sr-vitrine-vazio {
    padding:22px;
    background:#fff8fa;
    border-radius:12px;
    color:#806c76
}

@media(hover:hover) {
    .sr-vitrine-produto {
        transition:transform .25s ease,box-shadow .25s ease
    }

    .sr-vitrine-produto:hover {
        transform:translateY(-4px);
        box-shadow:0 10px 28px rgba(62,38,50,.14)
    }

    .sr-vitrine-foto {
        transition:transform .3s ease
    }

    .sr-vitrine-produto:hover .sr-vitrine-foto {
        transform:scale(1.035)
    }

    .sr-vitrine-botao {
        transition:transform .25s ease,background-color .25s ease
    }

    .sr-vitrine-botao:hover {
        transform:scale(1.025)
    }
}

/* Banner */
.sr-vitrine-hero-banner {
    padding:0;
    margin-bottom:16px;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    overflow:hidden
}

.sr-vitrine-banner {
    display:block;
    width:100%;
    height:auto;
    border-radius:12px
}

/* Carrossel */
.sr-vitrine-carrossel {
    width:100%;
    min-width:0
}

.sr-vitrine-carrossel-janela {
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    scroll-behavior:smooth;
    scroll-padding:0;
    outline-offset:4px
}

.sr-vitrine-carrossel-janela::-webkit-scrollbar {
    display:none
}

.sr-vitrine-carrossel-trilho {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 60px)/4);
    gap:20px;
    align-items:stretch
}

.sr-vitrine-carrossel-trilho>.sr-vitrine-produto {
    scroll-snap-align:start;
    scroll-snap-stop:always
}

.sr-vitrine-carrossel-controles {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:16px
}

.sr-vitrine-carrossel-seta {
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid #dfb7c6;
    background:#fff2f6;
    color:#873b5a;
    cursor:pointer;
    font-size:1.25rem;
    line-height:1
}

.sr-vitrine-carrossel-seta:hover:not(:disabled) {
    background:#f7dce6
}

.sr-vitrine-carrossel-seta:disabled {
    opacity:.35;
    cursor:default
}

.sr-vitrine-carrossel-contador {
    min-width:80px;
    text-align:center;
    color:#806c76;
    font-size:.84rem
}

/* ============================================================
   JANELINHA DE RECOMENDAÇÕES DA SANDRA
   ============================================================ */

body.sr-indica-modal-aberto {
    overflow:hidden
}

.sr-indica-modal,
.sr-indica-modal * {
    box-sizing:border-box
}

.sr-indica-modal {
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    font-family:inherit
}

.sr-indica-modal.sr-indica-modal-ativo {
    display:flex
}

.sr-indica-modal-fundo {
    position:absolute;
    inset:0;
    background:rgba(34,23,30,.68);
    backdrop-filter:blur(4px)
}

.sr-indica-modal-caixa {
    position:relative;
    z-index:1;
    width:100%;
    max-width:640px;
    max-height:calc(100dvh - 40px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border-radius:20px;
    box-shadow:0 20px 70px rgba(0,0,0,.25);
    color:#40333a;
    animation:sr-indica-entrada .22s ease-out
}

@keyframes sr-indica-entrada {
    from {
        opacity:0;
        transform:translateY(14px) scale(.98)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}

/* Cabeçalho */
.sr-indica-modal-topo {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 24px;
    background:#fff5f8;
    border-bottom:1px solid #f0e0e6
}

.sr-indica-modal-selo {
    color:#a64c70;
    font-size:.78rem;
    font-weight:750;
    letter-spacing:.12em
}

.sr-indica-modal-x {
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f5e3e9;
    color:#793e57;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer
}

.sr-indica-modal-x:hover {
    background:#ebccd8
}

/* Área de conteúdo com rolagem */
.sr-indica-modal-corpo {
    padding:24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    min-height:0
}

/* Produto */
.sr-indica-modal-produto {
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:20px
}

.sr-indica-modal-imagem {
    flex:0 0 116px;
    width:116px;
    height:116px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
    background:#fff6f8;
    border:1px solid #f0e3e7
}

.sr-indica-modal-imagem img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:6px
}

.sr-indica-modal-imagem img[hidden] {
    display:none
}

.sr-indica-modal-cabecalho {
    flex:1;
    min-width:0
}

.sr-indica-modal-cabecalho h2 {
    margin:0;
    color:#703b52;
    font-size:clamp(1.2rem,3vw,1.55rem);
    font-weight:750;
    line-height:1.35
}

/* Descrição completa */
.sr-indica-modal-descricao {
    font-size:.96rem;
    line-height:1.75;
    color:#55474e;
    overflow-wrap:anywhere
}

.sr-indica-modal-descricao p {
    margin:0 0 13px
}

.sr-indica-modal-descricao p:last-child {
    margin-bottom:0
}

.sr-indica-modal-descricao strong {
    color:#713d55
}

.sr-indica-modal-descricao ul,
.sr-indica-modal-descricao ol {
    margin:10px 0 15px;
    padding-left:24px
}

.sr-indica-modal-descricao li {
    margin-bottom:6px
}

.sr-indica-modal-descricao a {
    color:#a64c70;
    text-decoration:underline
}

/* Assinatura */
.sr-indica-modal-assinatura {
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:24px;
    padding:16px;
    background:#fff7f9;
    border:1px solid #f3e2e8;
    border-radius:14px
}

.sr-indica-modal-avatar {
    display:block;
    flex:0 0 56px;
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #e6bdcc;
    background:#fff
}

.sr-indica-modal-assinatura-texto {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0
}

.sr-indica-modal-assinatura-texto strong {
    color:#873b5a;
    font-size:.98rem;
    font-style:italic;
    font-weight:700
}

.sr-indica-modal-assinatura-texto small {
    color:#85717b;
    font-size:.78rem;
    line-height:1.4
}

/* Botões */
.sr-indica-modal-rodape {
    display:flex;
    align-items:stretch;
    gap:12px;
    padding:18px 24px;
    background:#fff;
    border-top:1px solid #f0e3e7
}

.sr-indica-modal-saiba {
    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:12px 18px;
    border:0;
    border-radius:10px;
    background:#a64c70;
    color:#fff!important;
    text-decoration:none!important;
    font-size:.96rem;
    font-weight:750;
    line-height:1.3;
    text-align:center;
    transition:background .2s ease,transform .2s ease
}

.sr-indica-modal-saiba:hover {
    background:#853857;
    color:#fff!important;
    transform:translateY(-1px)
}

.sr-indica-modal-fechar {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:12px 22px;
    border:1px solid #e2c9d3;
    border-radius:10px;
    background:#fff;
    color:#75465b;
    font-family:inherit;
    font-size:.94rem;
    font-weight:650;
    cursor:pointer
}

.sr-indica-modal-fechar:hover {
    background:#fff1f5
}

.sr-indica-modal-saiba:focus-visible,
.sr-indica-modal-fechar:focus-visible,
.sr-indica-modal-x:focus-visible {
    outline:3px solid #703b52;
    outline-offset:3px
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media(max-width:1000px) {
    .sr-vitrine-categorias {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .sr-vitrine-grade {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .sr-vitrine-carrossel-trilho {
        grid-auto-columns:calc((100% - 40px)/3)
    }
}

@media(max-width:700px) {
    .sr-vitrine {
        padding:10px 12px 45px
    }

    .sr-vitrine-hero:not(.sr-vitrine-hero-banner) {
        padding:40px 18px
    }

    .sr-vitrine-hero-banner {
        padding:0
    }

    .sr-vitrine-categorias {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .sr-vitrine-grade {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }

    .sr-vitrine-produto-conteudo {
        padding:13px
    }

    .sr-vitrine-carrossel-trilho {
        grid-auto-columns:calc((100% - 12px)/2);
        gap:12px
    }

    .sr-indica-modal {
        padding:12px
    }

    .sr-indica-modal-caixa {
        max-height:calc(100dvh - 24px);
        border-radius:16px
    }

    .sr-indica-modal-topo {
        padding:12px 17px
    }

    .sr-indica-modal-corpo {
        padding:18px
    }

    .sr-indica-modal-produto {
        gap:13px
    }

    .sr-indica-modal-imagem {
        flex-basis:88px;
        width:88px;
        height:88px
    }

    .sr-indica-modal-rodape {
        padding:13px 17px;
        gap:9px
    }

    .sr-indica-modal-fechar {
        padding:11px 15px
    }
}

@media(max-width:440px) {
    .sr-vitrine-categorias {
        grid-template-columns:1fr
    }

    .sr-vitrine-categoria {
        min-height:auto
    }

    .sr-vitrine-grade {
        grid-template-columns:1fr
    }

    .sr-vitrine-carrossel-trilho {
        grid-auto-columns:100%
    }

    .sr-indica-modal-cabecalho h2 {
        font-size:1.13rem
    }

    .sr-indica-modal-descricao {
        font-size:.91rem;
        line-height:1.65
    }

    .sr-indica-modal-assinatura {
        padding:12px;
        gap:10px
    }

    .sr-indica-modal-avatar {
        width:48px;
        height:48px;
        flex-basis:48px
    }

    .sr-indica-modal-assinatura-texto small {
        font-size:.72rem
    }

    .sr-indica-modal-saiba {
        font-size:.88rem;
        padding:11px 10px
    }

    .sr-indica-modal-fechar {
        font-size:.86rem;
        padding:11px 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .sr-vitrine-categoria,
    .sr-vitrine-produto,
    .sr-vitrine-foto,
    .sr-vitrine-botao,
    .sr-indica-modal-saiba {
        transition:none!important
    }

    .sr-vitrine-carrossel-janela {
        scroll-behavior:auto
    }

    .sr-indica-modal-caixa {
        animation:none
    }
}

/* ============================================================
   NOTEBOOKS — TELAS COM ALTURA REDUZIDA
   Exemplo: 1366 x 768
   ============================================================ */

@media (min-width:701px) and (max-width:1366px) and (max-height:768px) {

    .sr-indica-modal {
        padding:12px;
    }

    .sr-indica-modal-caixa {
        max-height:calc(100dvh - 24px);
    }

    .sr-indica-modal-topo {
        padding:11px 20px;
        flex-shrink:0;
    }

    .sr-indica-modal-corpo {
        padding:16px 20px;
        overflow-y:auto;
        min-height:0;
    }

    .sr-indica-modal-produto {
        gap:15px;
        margin-bottom:14px;
    }

    .sr-indica-modal-imagem {
        flex:0 0 88px;
        width:88px;
        height:88px;
    }

    .sr-indica-modal-cabecalho h2 {
        font-size:1.3rem;
        line-height:1.3;
    }

    .sr-indica-modal-descricao {
        font-size:.91rem;
        line-height:1.55;
    }

    .sr-indica-modal-descricao p {
        margin-bottom:9px;
    }

    .sr-indica-modal-assinatura {
        margin-top:15px;
        padding:11px 13px;
    }

    .sr-indica-modal-avatar {
        flex-basis:44px;
        width:44px;
        height:44px;
    }

    .sr-indica-modal-rodape {
        padding:12px 20px;
        flex-shrink:0;
    }

    .sr-indica-modal-saiba,
    .sr-indica-modal-fechar {
        min-height:42px;
        padding-top:9px;
        padding-bottom:9px;
    }
}