/* Categorias editoriais EllaBella - layout Zara/Mango
   Fotos reais ocupando todo o card, com enquadramento individual. */

.category-section{
   background:#2B221E !important;
    color:#fff !important;
    padding:110px 6vw !important;
}

.category-section .section-heading{
    max-width:900px;
    margin-bottom:38px;
}

.category-section .section-heading .eyebrow{
    color:#B18472 !important;
}

.category-section .section-heading h2{
    color:#F7EFE9 !important;
    font-size:clamp(48px,6vw,92px) !important;
    line-height:.9 !important;
    letter-spacing:-.045em;
}

.category-grid.sales,
.editorial-categories{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
}

.category-grid.sales .category-card,
.editorial-category{
    position:relative !important;
    min-height:430px !important;
    border-radius:26px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:#211a17 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    box-shadow:0 24px 70px rgba(0,0,0,.20) !important;
    isolation:isolate;
    text-decoration:none !important;
}

/* Remove efeitos antigos de círculo/background */
.category-grid.sales .category-card::before,
.editorial-category::before{
    content:none !important;
    display:none !important;
}

.category-grid.sales .category-card::after,
.editorial-category::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
    background:
        linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.24) 54%, rgba(0,0,0,.05)),
        linear-gradient(120deg, rgba(0,0,0,.22), transparent 60%) !important;
    z-index:1 !important;
    transition:background .35s ease !important;
}

.category-bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:0 !important;
    display:block !important;
    transform:scale(1.01) !important;
    transition:transform .65s ease, filter .65s ease !important;
    z-index:0 !important;
}

/* Enquadramento individual das imagens */
.editorial-categories .editorial-category:nth-child(1) .category-bg{
    object-position:center center !important; /* Calças */
}

.editorial-categories .editorial-category:nth-child(2) .category-bg{
    object-position:center 72% !important; /* Conjuntos: mostra mais abaixo */
}

.editorial-categories .editorial-category:nth-child(3) .category-bg{
    object-position:center 68% !important; /* Blusas: mostra mais abaixo */
}

.editorial-categories .editorial-category:nth-child(4) .category-bg{
    object-position:center center !important; /* Promoções */
}

.editorial-category:hover .category-bg,
.category-grid.sales .category-card:hover .category-bg{
    transform:scale(1.07) !important;
    filter:saturate(1.04) contrast(1.04) !important;
}

.editorial-category:hover::after,
.category-grid.sales .category-card:hover::after{
    background:
        linear-gradient(to top, rgba(0,0,0,.84), rgba(0,0,0,.30) 54%, rgba(0,0,0,.08)),
        linear-gradient(120deg, rgba(0,0,0,.28), transparent 60%) !important;
}

.category-content{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    padding:0 24px 24px !important;
}

.category-grid.sales .category-card span,
.editorial-category span{
    display:block !important;
    color:#fff !important;
    font-family:var(--font-title) !important;
    font-size:clamp(32px,3vw,48px) !important;
    line-height:1 !important;
    margin:0 !important;
    text-shadow:0 8px 28px rgba(0,0,0,.35) !important;
}

.category-grid.sales .category-card small,
.editorial-category small{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    color:#fff !important;
    font-weight:700 !important;
    opacity:0 !important;
    transform:translateY(10px) !important;
    transition:.32s ease !important;
    text-transform:uppercase !important;
    letter-spacing:.08em !important;
    font-size:11px !important;
    margin-top:10px !important;
    position:static !important;
}

.category-grid.sales .category-card small::after,
.editorial-category small::after{
    content:"→";
    font-size:13px;
}

.category-grid.sales .category-card:hover small,
.editorial-category:hover small{
    opacity:1 !important;
    transform:translateY(0) !important;
}

@media(max-width:1180px){
    .category-grid.sales,
    .editorial-categories{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .category-grid.sales .category-card,
    .editorial-category{
        min-height:420px !important;
    }
}

@media(max-width:760px){
    .category-section{
        padding:78px 18px !important;
    }

    .category-grid.sales,
    .editorial-categories{
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
    }

    .category-grid.sales .category-card,
    .editorial-category{
        min-height:280px !important;
        border-radius:20px !important;
    }

    .category-content{
        padding:0 16px 18px !important;
    }

    .category-grid.sales .category-card span,
    .editorial-category span{
        font-size:30px !important;
    }

    .category-grid.sales .category-card small,
    .editorial-category small{
        opacity:1 !important;
        transform:none !important;
        font-size:10px !important;
    }

    .editorial-categories .editorial-category:nth-child(2) .category-bg{
        object-position:center 68% !important;
    }

    .editorial-categories .editorial-category:nth-child(3) .category-bg{
        object-position:center 62% !important;
    }
}

@media(max-width:420px){
    .category-grid.sales .category-card,
    .editorial-category{
        min-height:235px !important;
    }

    .category-grid.sales .category-card span,
    .editorial-category span{
        font-size:26px !important;
    }
}

/* Ajuste fino das imagens das categorias */

.editorial-categories .editorial-category:nth-child(1) .category-bg{
    object-position: center center !important;
}

.editorial-categories .editorial-category:nth-child(2) .category-bg{
    object-position: center 72% !important;
}

.editorial-categories .editorial-category:nth-child(3) .category-bg{
    object-position: center 70% !important;
}

.editorial-categories .editorial-category:nth-child(4) .category-bg{
    object-position: center center !important;
}


/* =========================================================
   AJUSTE DEFINITIVO DO ENQUADRAMENTO DAS CATEGORIAS
   O problema era que 70%/72% joga a imagem para cima.
   Valores menores (15% a 30%) descem a foto e mostram mais rosto/topo.
   ========================================================= */

html body .category-section .editorial-categories .editorial-category .category-bg{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

/* Calças */
html body .category-section .editorial-categories .editorial-category:nth-child(1) .category-bg{
    object-position:center 95%;
}

/* Conjuntos — desce a imagem para não cortar cabeça/rosto */
html body .category-section .editorial-categories .editorial-category:nth-child(2) .category-bg{
    object-position:center 22% !important;
}

/* Blusas — desce a imagem para mostrar melhor rosto e gola */
html body .category-section .editorial-categories .editorial-category:nth-child(3) .category-bg{
    object-position:center 18% !important;
}

/* Promoções */
html body .category-section .editorial-categories .editorial-category:nth-child(4) .category-bg{
    object-position:center center !important;
}

/* Tablet */
@media(max-width:1180px){
    html body .category-section .editorial-categories .editorial-category:nth-child(2) .category-bg{
        object-position:center 15% !important;
    }

    html body .category-section .editorial-categories .editorial-category:nth-child(3) .category-bg{
        object-position:center 16% !important;
    }
}

/* Celular */
@media(max-width:760px){
    html body .category-section .editorial-categories .editorial-category:nth-child(2) .category-bg{
        object-position:center 18% !important;
    }

    html body .category-section .editorial-categories .editorial-category:nth-child(3) .category-bg{
        object-position:center 14% !important;
    }
}



/* =========================================================
   CONTROLE FINAL DO ENQUADRAMENTO DAS CATEGORIAS
   Alterar apenas estes valores quando quiser ajustar.
   Menor % = mostra mais a parte de cima.
   Maior % = mostra mais a parte de baixo.
   ========================================================= */

html body .category-section .editorial-categories .editorial-category .category-bg{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

/* 1 - Calças */
html body .category-section .editorial-categories .editorial-category:nth-child(1) .category-bg{
    object-position:center 95% !important;
}

/* 2 - Conjuntos */
html body .category-section .editorial-categories .editorial-category:nth-child(2) .category-bg{
    object-position:center 22% !important;
}

/* 3 - Blusas */
html body .category-section .editorial-categories .editorial-category:nth-child(3) .category-bg{
    object-position:center 18% !important;
}

/* 4 - Promoções */
html body .category-section .editorial-categories .editorial-category:nth-child(4) .category-bg{
    object-position:center center !important;
}


/* =========================================================
   FINAL - PALETA ELLABELLA + IMAGENS SEM BORDA PRETA
   Seção em bege/marrom da marca e cards sem fundo preto.
   ========================================================= */

html body .category-section{
    background:
        radial-gradient(circle at 8% 10%, rgba(216,194,181,.35), transparent 32%),
        linear-gradient(135deg, #F5EFEA 0%, #EADBD2 100%) !important;
    color:#2E2622 !important;
    padding:110px 6vw !important;
}

html body .category-section .section-heading .eyebrow{
    color:#A67664 !important;
}

html body .category-section .section-heading h2{
    color:#2E2622 !important;
}

html body .category-section .editorial-categories .editorial-category{
    background:#EADBD2 !important;
    border:1px solid rgba(177,132,114,.28) !important;
    box-shadow:0 24px 70px rgba(70,45,30,.12) !important;
}

/* Imagem inteira, sem corte e sem borda preta */
html body .category-section .editorial-categories .editorial-category .category-bg{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#EADBD2 !important;
    transform:none !important;
}

/* Remove zoom que fazia parecer corte */
html body .category-section .editorial-categories .editorial-category:hover .category-bg{
    transform:none !important;
    filter:saturate(1.03) contrast(1.02) !important;
}

/* Overlay mais elegante, marrom suave */
html body .category-section .editorial-categories .editorial-category::after{
    background:
        linear-gradient(to top, rgba(46,38,34,.72), rgba(46,38,34,.20) 48%, rgba(46,38,34,.00)),
        linear-gradient(120deg, rgba(46,38,34,.12), transparent 58%) !important;
}

html body .category-section .editorial-categories .editorial-category:hover::after{
    background:
        linear-gradient(to top, rgba(46,38,34,.78), rgba(46,38,34,.24) 48%, rgba(46,38,34,.02)),
        linear-gradient(120deg, rgba(46,38,34,.16), transparent 58%) !important;
}

html body .category-section .editorial-categories .editorial-category span{
    color:#fff !important;
    text-shadow:0 8px 28px rgba(46,38,34,.42) !important;
}

html body .category-section .editorial-categories .editorial-category small{
    color:#fff !important;
}

/* Alturas responsivas para preservar a foto inteira */
@media(min-width:1181px){
    html body .category-section .editorial-categories .editorial-category{
        min-height:460px !important;
    }
}

@media(max-width:1180px){
    html body .category-section{
        padding:90px 5vw !important;
    }

    html body .category-section .editorial-categories .editorial-category{
        min-height:470px !important;
    }
}

@media(max-width:760px){
    html body .category-section{
        padding:78px 18px !important;
    }

    html body .category-section .editorial-categories .editorial-category{
        min-height:320px !important;
    }
}

@media(max-width:420px){
    html body .category-section .editorial-categories .editorial-category{
        min-height:280px !important;
    }
}