.categories-showcase{
.categories-showcase{
    max-width:1365px;
    margin:0 auto;
    padding:30px 0 50px; /* match Ref spacing */
    box-sizing:border-box;
}

.category-row{
    display:flex;
    gap:10px;
    margin-bottom:10px;
    align-items:stretch;
    box-sizing:border-box;
    padding-left:15px; /* gutter like Ref */
    padding-right:15px;
}

.category-card{
    position:relative;
    overflow:hidden;
    background:#000;
    min-height:1px;
    box-sizing:border-box;
}

.category-card.large{ flex:1 1 100%; height:365px; }

.category-row.two-cols .category-card.medium{ flex:1 1 calc(50% - 10px); height:353.734px; }

.category-row.three-cols .category-card.small{ flex:1 1 calc(33.3333% - 10px); height:234px; }

/* picture / image fit - remove abnormal padding/gaps */
.category-card picture,
.category-card img.category-bg{ display:block; width:100%; height:100%; }

.category-card img.category-bg{ object-fit:cover; vertical-align:middle; transform:translateZ(0); transition:transform 0.5s ease; display:block; }

.category-content{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.category-content h3{ color:#fff; font-size:24px; font-weight:600; text-transform:uppercase; letter-spacing:2.4px; margin:0; padding:10px 22px; background:rgba(0,0,0,0.28); border-radius:2px; pointer-events:auto; }

/* Hide overlay text as requested (keeps markup but removes visible text) */
.category-content{ display:none !important; }

/* Image size guidance (exact pixel dimensions for export) */
/* Mobile (portrait): 640 x 360 px  — used at <= 767px */
/* Tablet: 1024 x 576 px  — used at <= 1023px */
/* Laptop: 1366 x 768 px — good mid-size for laptop view (use responsive crop) */
/* Desktop / Hero: 1920 x 1080 px — full-width banner hero */
/* Recommended export: provide source images at 2x (retina) when possible, e.g. 1280x720 (mobile 2x), 2048x1152 (tablet 2x), 2732x1536 (desktop 2x) */

.category-card:hover img.category-bg{ transform:scale(1.03); }

@media (max-width:1023px){
    .category-card.large{ height:360px; }
    .category-row.two-cols .category-card.medium{ height:353px; }
}

@media (max-width:767px){
    .categories-showcase{ 
        display:flex !important; 
        flex-direction:column !important; 
        gap:0 !important; 
        padding:0 !important; 
        align-items:center !important;
    }
    .category-row{ 
        flex-direction:column !important; 
        padding:0 !important; 
        gap:10px !important; 
        margin-bottom:10px !important; 
        width:100% !important;
        align-items:center !important;
    }
    .category-row:last-child{ margin-bottom:0 !important; }
    .category-card,
    .category-card.large,
    .category-card.medium,
    .category-card.small { 
        flex:none !important; 
        width:390px !important; 
        height:175px !important; 
        min-height:175px !important;
        max-height:175px !important;
        max-width:100% !important;
        padding:0 !important; 
        margin:0 !important;
        background:#000 !important;
    }
    .category-card img.category-bg{ 
        width:390px !important; 
        height:175px !important; 
        max-width:100% !important;
        object-fit:cover !important; 
        padding:0 !important;
    }
    .category-content h3{ font-size:16px; padding:8px 14px; letter-spacing:1.8px; }
}
.category-content{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}
.category-content h3{
    color:#fff;
    font-size:24px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2.4px;
    margin:0;
    padding:10px 22px;
    background:rgba(0,0,0,0.28);
    border-radius:2px;
    pointer-events:auto;
}

/* hover subtle zoom */
.category-card:hover img.category-bg{
    transform:scale(1.03);
}

/* responsive adjustments */
@media (max-width:1023px){
    .category-card.large{ min-height:360px; }
    .category-row.two-cols .category-card.medium{ min-height:300px; }
}