/* GOCCE category showcase — desktop layout matched to the supplied reference screenshot. */
body .gocce-category-showcase{
    position:relative!important;
    width:100vw!important;
    max-width:100vw!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    margin-top:clamp(18px,2vw,34px)!important;
    margin-bottom:clamp(34px,4vw,70px)!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:0!important;
    box-sizing:border-box!important;
    background:#fff;
    overflow:visible!important;
}
body .gocce-category-showcase,
body .gocce-category-showcase *{box-sizing:border-box}

/* The reference uses roughly 91.5% of the viewport with ~24px gaps at 1920px. */
body .gocce-category-stack{
    width:91.5vw!important;
    max-width:1800px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:clamp(14px,1.25vw,24px)!important;
    row-gap:clamp(14px,1.25vw,24px)!important;
    align-items:start!important;
}
body .gocce-category-card{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    aspect-ratio:1 / 1!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#351a0e!important;
    text-decoration:none!important;
    line-height:0!important;
    isolation:isolate;
}
body .gocce-category-card img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:cover!important;
    object-position:center!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:scale(1);
    transition:transform .38s cubic-bezier(.2,.72,.2,1),filter .3s ease;
}
body .gocce-category-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:rgba(255,255,255,.035);
    opacity:0;
    transition:opacity .28s ease;
}
@media (hover:hover) and (pointer:fine){
    body .gocce-category-card:hover img{transform:scale(1.018);filter:saturate(1.015) contrast(1.01)}
    body .gocce-category-card:hover::after{opacity:1}
}
body .gocce-category-card:focus-visible{outline:3px solid #111!important;outline-offset:4px}

/* Light reveal only; no animation library. */
body .gocce-category-showcase.gocce-motion-ready .gocce-category-card{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .42s ease,transform .46s cubic-bezier(.2,.72,.2,1);
}
body .gocce-category-showcase.gocce-motion-ready .gocce-category-card.is-visible{
    opacity:1;
    transform:translateY(0);
    transition-delay:calc(var(--gocce-index,0) * 35ms);
}

/* Medium/tablet: two square cards, still spacious. */
@media(max-width:1100px){
    body .gocce-category-stack{
        width:calc(100vw - 32px)!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:14px!important;
    }
}

/* Phone: one large card per row so the baked-in labels remain readable. */
@media(max-width:700px){
    body .gocce-category-showcase{
        margin-top:14px!important;
        margin-bottom:34px!important;
    }
    body .gocce-category-stack{
        width:calc(100vw - 20px)!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    body .gocce-category-card,
    body .gocce-category-card img{transition:none!important;animation:none!important}
    body .gocce-category-showcase.gocce-motion-ready .gocce-category-card{opacity:1!important;transform:none!important}
}