/* ============================================================
   LojaObra — 4 Banners de Categoria (grid 2x2) na home
   Estilo Fortlev: split colorido + imagem produto + CTA navy/laranja
   ============================================================ */
.lo-cat-banners{
    padding:32px 0 16px;
    background:#fff;
}
.lo-cat-banners__grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
}

.lo-catban{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    min-height:230px;
    display:grid;
    grid-template-columns:1.25fr 1fr;
    align-items:stretch;
    text-decoration:none;
    color:#fff;
    isolation:isolate;
    box-shadow:0 10px 28px rgba(14,42,92,.1);
    transition:transform .2s ease, box-shadow .2s ease;
}
.lo-catban:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(14,42,92,.16);
    color:#fff;
}

/* ----- THEMES (4 variações de cor de fundo) ----- */
.lo-catban--orange{
    background:linear-gradient(135deg, #F58220 0%, #ef7510 60%, #d96d12 100%);
}
.lo-catban--orange-dark{
    background:linear-gradient(135deg, #d96d12 0%, #c25e0a 60%, #a14d05 100%);
}
.lo-catban--navy{
    background:linear-gradient(135deg, #143a7a 0%, #0E2A5C 60%, #0a1f44 100%);
}
.lo-catban--navy-light{
    background:linear-gradient(135deg, #1f4a99 0%, #143a7a 60%, #0E2A5C 100%);
}

/* ----- Fundo decorativo ----- */
.lo-catban__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}
.lo-catban__shape{
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-100px;
    right:-80px;
    filter:blur(2px);
}
.lo-catban__dots{
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size:20px 20px;
    mask-image:radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.6) 0%, transparent 65%);
    -webkit-mask-image:radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.6) 0%, transparent 65%);
}

/* ----- Conteúdo (esquerda) ----- */
.lo-catban__content{
    position:relative;
    z-index:1;
    padding:24px 22px 22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-width:0;
    gap:12px;
}

/* Título com 3 linhas: primeira linha em "caixa" navy, segunda linha em destaque, terceira em corpo */
.lo-catban__head{
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
}
.lo-catban__title-line{
    color:#fff;
    font-weight:900;
    letter-spacing:.5px;
    line-height:1;
    text-transform:uppercase;
}
.lo-catban__title-line--1{
    background:var(--lo-navy, #0E2A5C);
    color:#fff;
    padding:6px 12px;
    border-radius:4px;
    font-size:clamp(18px, 2.1vw, 24px);
    letter-spacing:.8px;
    box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.lo-catban__title-line--2{
    background:var(--lo-navy, #0E2A5C);
    color:#fff;
    padding:6px 12px;
    border-radius:4px;
    font-size:clamp(18px, 2.1vw, 24px);
    letter-spacing:.8px;
    box-shadow:0 4px 14px rgba(0,0,0,.15);
    margin-top:-2px;
}
.lo-catban__title-line--3{
    background:transparent;
    color:rgba(255,255,255,.94);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.06em;
    line-height:1.35;
    padding:6px 0 0;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
    max-width:24ch;
}

/* Variante: navy → swap colors do título (caixa fica laranja) */
.lo-catban--navy .lo-catban__title-line--1,
.lo-catban--navy-light .lo-catban__title-line--1,
.lo-catban--navy .lo-catban__title-line--2,
.lo-catban--navy-light .lo-catban__title-line--2{
    background:var(--lo-orange, #F58220);
}

/* Sub (uppercase linha curta) */
.lo-catban__sub{
    margin:0;
    color:rgba(255,255,255,.92);
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.35;
    text-transform:uppercase;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
    max-width:32ch;
}

/* Features bullets (para banners "navy" no estilo da imagem 2) */
.lo-catban__feats{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
}
.lo-catban__feats li{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:700;
    color:rgba(255,255,255,.92);
    letter-spacing:.02em;
}
.lo-catban__feats svg{ color:var(--lo-orange, #F58220); flex-shrink:0; }
.lo-catban--orange .lo-catban__feats svg,
.lo-catban--orange-dark .lo-catban__feats svg{ color:#FFD3A8; }

/* CTA azul navy */
.lo-catban__cta{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--lo-navy, #0E2A5C);
    color:#fff;
    padding:11px 22px;
    border-radius:6px;
    font-weight:800;
    font-size:13px;
    letter-spacing:.05em;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    transition:background .15s ease, transform .15s ease;
    margin-top:auto;
}
.lo-catban__cta svg{ transition:transform .15s ease; }
.lo-catban:hover .lo-catban__cta{
    background:var(--lo-navy-dark, #0a1f44);
    transform:translateY(-1px);
}
.lo-catban:hover .lo-catban__cta svg{ transform:translateX(3px); }

/* Variante: navy → CTA fica laranja para contraste */
.lo-catban--navy .lo-catban__cta,
.lo-catban--navy-light .lo-catban__cta{
    background:var(--lo-orange, #F58220);
}
.lo-catban--navy:hover .lo-catban__cta,
.lo-catban--navy-light:hover .lo-catban__cta{
    background:#d96d12;
}

/* ----- Mídia (imagem do produto à direita) ----- */
.lo-catban__media{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    min-width:0;
}
.lo-catban__media img{
    width:100%;
    max-width:200px;
    max-height:200px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.25));
    transition:transform .25s ease;
}
.lo-catban:hover .lo-catban__media img{
    transform:scale(1.05) rotate(-1deg);
}
.lo-catban__media-placeholder{
    width:140px;
    height:140px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.6);
}

/* ----- Responsivo ----- */
@media (max-width: 900px){
    .lo-catban{
        min-height:200px;
        grid-template-columns:1.4fr 1fr;
    }
    .lo-catban__content{ padding:18px 16px; }
    .lo-catban__media img{ max-width:140px; max-height:140px; }
    .lo-catban__title-line--1,
    .lo-catban__title-line--2{ font-size:16px; padding:5px 10px; }
    .lo-catban__cta{ padding:9px 16px; font-size:12px; }
}
@media (max-width: 640px){
    .lo-cat-banners__grid{
        grid-template-columns:1fr;
        gap:14px;
    }
    .lo-catban{ min-height:180px; }
}
@media (max-width: 420px){
    .lo-catban{
        grid-template-columns:1.7fr 1fr;
    }
    .lo-catban__title-line--1,
    .lo-catban__title-line--2{ font-size:14px; }
    .lo-catban__title-line--3,
    .lo-catban__sub{ font-size:10.5px; }
    .lo-catban__media img{ max-width:100px; max-height:100px; }
    .lo-catban__cta{ font-size:11.5px; padding:8px 14px; }
}