*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:Arial, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f6f8fb;
    color:#0f172a;
}

.page-shell{
    width:96%;
    margin:0 auto;
    padding:6px 0;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    align-items:start;
}

.product-section + .product-section{
    margin-top:30px;
}

.product-section-title{
    margin:0 0 16px;
    padding:10px 16px;
    border-left:5px solid #00aeef;
    border-radius:8px;
    color:#001b44;
    background:linear-gradient(135deg, rgba(255,255,255,0.94), rgba(232,246,255,0.92));
    box-shadow:0 12px 28px rgba(0, 31, 81, 0.08);
    font-size:30px;
    font-weight:900;
    line-height:1.1;
}

.product-card{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(15, 23, 42, 0.1);
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 16px 38px rgba(15, 23, 42, 0.09);
    animation:cardRise 0.55s ease both;
    animation-delay:calc(var(--card-index, 0) * 35ms);
    transition:transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.product-card:hover{
    border-color:rgba(0, 174, 239, 0.42);
    box-shadow:0 22px 52px rgba(0, 119, 168, 0.15);
    transform:translateY(-5px);
}

.product-card-media{
    position:relative;
    width:100%;
    aspect-ratio:18 / 9;
    overflow:hidden;
    background:
        linear-gradient(135deg, #dbeafe, #f8fafc 48%, #dcfce7);
}

.product-image-track{
    width:100%;
    height:100%;
    display:flex;
    transform:translateX(0);
    transition:transform 0.7s ease;
}

.product-slide{
    position:relative;
    flex:0 0 100%;
    width:100%;
    height:100%;
    overflow:hidden;
}

.product-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    background:#f8fafc;
}

body[data-product-category="chemicals-salts"] .product-slide img{
    object-fit:contain;
}

.product-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(0, 27, 68, 0.16));
    pointer-events:none;
}

.product-slide.image-missing{
    display:grid;
    place-items:center;
    background:
        linear-gradient(135deg, rgba(0,174,239,0.24), rgba(16,185,129,0.16)),
        #f8fafc;
}

.product-slide.image-missing::before{
    content:"NN Technologies";
    color:#001b44;
    font-size:15px;
    font-weight:900;
    text-transform:uppercase;
}

.product-slide-dots{
    position:absolute;
    left:14px;
    bottom:12px;
    display:flex;
    gap:6px;
}

.product-slide-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255, 255, 255, 0.62);
    border:1px solid rgba(0, 27, 68, 0.2);
    transition:width 0.24s ease, background 0.24s ease;
}

.product-slide-dots span.active{
    width:21px;
    border-radius:999px;
    background:#00aeef;
}

.product-card-copy{
    min-height:0;
    padding:8px 12px 10px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.product-card-copy p{
    color:#0077a8;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.product-card-copy h2{
    color:#001b44;
    font-size:24px;
    font-weight:900;
    line-height:1.08;
    letter-spacing:0;
    text-align:center;
}

.product-card-copy span{
    color:#334155;
    font-size:18px;
    font-weight:800;
    line-height:1.32;
}

.product-empty{
    padding:34px;
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 16px 38px rgba(15, 23, 42, 0.08);
}

.product-empty h1{
    margin-bottom:16px;
    color:#001b44;
}

.product-empty a{
    color:#0077a8;
    font-weight:900;
}

@keyframes cardRise{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:1100px){
    .product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:760px){
    .page-shell{
        width:96%;
        padding:6px 0;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .product-card:hover{
        transform:none;
    }

    .product-card-copy{
        min-height:auto;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:0.01ms !important;
    }
}

/* Responsive refinement: keeps desktop unchanged while tightening tablet/mobile cards. */
@media(max-width:1024px){
    .page-shell{
        width:94%;
    }

    .product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:16px;
    }

    .product-card-media{
        aspect-ratio:16 / 9;
    }

    .product-card-copy{
        padding:8px 10px 10px;
    }

    .product-card-copy h2{
        font-size:21px;
    }

    .product-card-copy span{
        font-size:16px;
    }
}

@media(max-width:640px){
    .page-shell{
        width:96%;
        padding:4px 0 18px;
    }

    .product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }

    .product-section + .product-section{
        margin-top:20px;
    }

    .product-section-title{
        margin-bottom:10px;
        padding:8px 10px;
        border-left-width:3px;
        font-size:18px;
    }

    .product-card{
        border-radius:8px;
    }

    .product-card-media{
        aspect-ratio:4 / 3;
    }

    .product-slide-dots{
        display:none;
    }

    .product-card-copy{
        padding:6px 6px 7px;
        gap:3px;
    }

    .product-card-copy p{
        font-size:8px;
        line-height:1.1;
    }

    .product-card-copy h2{
        font-size:12.5px;
        line-height:1.14;
    }

    .product-card-copy span{
        font-size:10.5px;
        line-height:1.28;
    }
}

@media(max-width:360px){
    .product-grid{
        gap:7px;
    }

    .product-card-copy h2{
        font-size:11.5px;
    }

    .product-card-copy span{
        font-size:9.8px;
    }
}

/* Final visibility pass for deployed desktop product grids. */
@media(min-width:1025px){
    .page-shell{
        width:min(95%, 1320px);
        padding:16px 0 38px;
    }

    .product-grid{
        gap:16px;
    }

    .product-section + .product-section{
        margin-top:24px;
    }

    .product-section-title{
        margin-bottom:14px;
        padding:9px 14px;
        font-size:24px;
        line-height:1.12;
    }

    .product-card{
        border-radius:8px;
    }

    .product-card-media{
        aspect-ratio:18 / 9;
    }

    .product-card-copy{
        padding:9px 12px 12px;
        gap:5px;
    }

    .product-card-copy p{
        font-size:10px;
        line-height:1.16;
    }

    .product-card-copy h2{
        font-size:20px;
        line-height:1.12;
    }

    .product-card-copy span{
        font-size:14px;
        line-height:1.34;
    }
}

@media(min-width:1025px) and (max-width:1400px){
    .page-shell{
        width:95%;
    }

    .product-grid{
        gap:14px;
    }

    .product-card-copy h2{
        font-size:19px;
    }

    .product-card-copy span{
        font-size:13.5px;
        line-height:1.3;
    }
}